CODEWITHSUNDEEP
javascripthtmlcanvas
user2952265
user2952265

Reputation: 1630

Canvas - Clear rect is not working

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;

    }

Upvotes: 1

Views: 332

Answers (1)

user13500
user13500

Reputation: 3856

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

and/or similar.

Upvotes: 1

Related Questions