drawing canvas

DOCUMENTATION
plusNeocoin() gives you one neocoin. can be put in a loop or interval to easily farm neocoins. NOTE: DO NOT PUT IN WHILE LOOPS
setBackground(color) sets the background color to the html color you wrote in the parameters. you need to write the color inside quote marks.
setColor(color) sets the color to chosen color. same as setBackground() you need to write the color u want inside of quote marks in the parameters

rect(x, y, width, height) draws a red rectangle (unless you used fillStyle variable to change the color) at chosen coordinates with chosen size.
you can use canvas in x, y, width, height to calculate dimensions. (for example rect(canvas.width/2, canvas.height/2, 5, 5) would draw
a red rectangle in the middle of the canvas with the width and height of 5 pixels)

fillStyle will set the fillStyle to chosen html color. the fillStyle variable changes the color of shapes in the canvas. fillStyle = "green" will set the color of shapes to green

fun examples!

creates small dots everywhere

setInterval(function(){
    rect(Math.floor(Math.random() * canvas.width), Math.floor(Math.random() * canvas.height), 5, 5);
}, 100);
        

game where you can walk around with W A S D

let x = 0;
let y = 0;

const speed = 5;

let keys = {};

document.addEventListener("keydown", (event) => {
    keys[event.key] = true;
});

document.addEventListener("keyup", (event) => {
    keys[event.key] = false;
});

function game() {
    ctx.clearRect(0, 0, canvas.width, canvas.height)

    if(keys["w"]) { y -= speed; }
    if(keys["s"]) { y += speed; }
    if(keys["a"]) { x -= speed; }
    if(keys["d"]) { x += speed; }

    ctx.fillRect(x, y, 20, 20);
    requestAnimationFrame(game);
}

game();
        

get 600 neocoins every minute!

setInterval(function() {
    plusNeocoin();
    text.textContent = "neocoins: " + +localStorage.getItem("neocoin");
}, 100);