Canvas - Clear rect is not working

Question

I want to move a rect from the top to the bottom of the canvas. But somehow the canvas does not get cleared. What is wrong?

js fiddle

JS

(function animloop(){
  requestAnimFrame(animloop);
  redraw();
})();


    function redraw() {

        ctx.clearRect(0,0,canvasWidth, canvasHeight);
        ctx.rect(20,y,50,50);
        ctx.fillStyle="red";
        ctx.fill(); 
        y += 2;

    }

Answer 1

It is cleared, but you do not start new path, thus the old keeps being re-painted.

Add:

ctx.beginPath();

in the redraw() function.

You might also want to look at

• What exactly is a canvas path, and what is the use of ctx.closePath()?
• Canvas consumes a lot of memory

and/or similar.