I am very new to canvas and I am just trying to build a basic function, so a rectangle can move from left to right. It seems like I just don't understand the logic.

This is what I have so far:

var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d'),
    x; 

function draw() {  
  ctx.beginPath();
  ctx.rect(x, 20, 20, 20);
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = "#ffffff";
  ctx.fill();
  ctx.closePath(); 
  x = x + 20;
}

draw(); 

setInterval(draw, 1); 

/

Why is that code wrong and how would be the correct logic of moving a rectangle?

Any help would be appreciated!

I am very new to canvas and I am just trying to build a basic function, so a rectangle can move from left to right. It seems like I just don't understand the logic.

This is what I have so far:

var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d'),
    x; 

function draw() {  
  ctx.beginPath();
  ctx.rect(x, 20, 20, 20);
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = "#ffffff";
  ctx.fill();
  ctx.closePath(); 
  x = x + 20;
}

draw(); 

setInterval(draw, 1); 

https://jsfiddle/tj7d29fw/

Why is that code wrong and how would be the correct logic of moving a rectangle?

Any help would be appreciated!

• javascript
• canvas

• You aren't calling draw. Try draw() and see if that helps. Also you'll have to call it below var draw = ... because you aren't using a function definition so it is not hoisted. – jakeehoffmann Commented Apr 2, 2017 at 14:28
• You should also stick this sucker into a code snippet with some HTML so people can run it and help you better. – jakeehoffmann Commented Apr 2, 2017 at 14:30
• 3 You never initialized x. x = 0 – Ry- ♦ Commented Apr 2, 2017 at 14:43
• @jakeehoffmann I have changed the code the way you said but that still doesn't help. Please check it here: jsfiddle/tj7d29fw – Reza Saadati Commented Apr 2, 2017 at 14:44
• 2 Initialize x as Ryan suggests then it works. – jakeehoffmann Commented Apr 2, 2017 at 14:46

3 Answers 3

Your code has multiple issues:

• clearRect() fills the canvas with transparent pixels, which has the same effect as filling with your canvas' CSS background color, which is white per default. You need to change your CSS background color so your white rectangle bees visible.

• requestAnimationFrame() is preferred over setInterval() for visual animations as it adapts to your browser's and screen's refresh rate. Use the time stamp it supplies to your callback to synchronize your drawings.

• closePath() is not needed when drawing a rectangle, as it is already a closed shape.

• You need to initialize x to a Number, otherwise it is undefined which evaluates to `NaN´ when incrementing.

var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d'),
    x = 0,
    last = performance.now();

function draw(timestamp) {
  requestAnimationFrame(draw);
  
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.rect(x, 20, 20, 20);
  ctx.fillStyle = "#ffffff";
  ctx.fill();
  
  x += (timestamp - last) / 10;
  last = timestamp;
}
requestAnimationFrame(draw);

#canvas {
  background-color: black;
}

<canvas id='canvas'>

It seems like you don't initialize your x variable to a number, so it doesn't move. I personalized a little bit your jsfiddle:

var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d'),
    x = 0; 

function draw() {  
  ctx.beginPath();
  ctx.rect(x, 20, 20, 20);
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = "#ffffff";
  ctx.fill();
  ctx.closePath(); 
  x = x + 1.2;
}

draw(); 

setInterval(draw, 1);

I link it hoping it helps:

https://jsfiddle/tj7d29fw/3/

The reason it doesn't work is that you've forgotten to initialize the variable x, this means that whenever you call your draw function, you're trying to draw at a undefined x value.

See this jsfiddle: https://jsfiddle/tj7d29fw/4/

On a second note, I would also suggest that you use requestAnimationFrame instead of setInterval to save on system resources. See https://developer.mozilla/en-US/docs/Web/API/window/requestAnimationFrame

Note: I changed the amount at which x is increased, to make the movement easier to see.