CODEWITHSUNDEEP
javascriptcanvas
Fabricio
Fabricio

Reputation: 7925

Why is clearRect not working properly in this case?

This is what I have, but clearRect is not working as I expect. The box let a trail.

<canvas id="canvas"></canvas>

<script>

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

var x=0;
!function loop() {
    requestAnimationFrame(loop);
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    ctx.rect(x++, 10, 80, 80);
    ctx.stroke();
}();

</script>

Upvotes: 0

Views: 140

Answers (1)

Felix Kling
Felix Kling

Reputation: 816462

The problem has nothing to ctx.clearRect.

ctx.rect adds to a path, but you are never starting or ending a new path, so all the calls to ctx.rect will add to the very same path, accumulating rectangular shapes.

Either start and end a new path:

ctx.beginPath();
ctx.rect(x++, 10, 80, 80);
ctx.closePath();
ctx.stroke();

or use ctx.strokeRect:

ctx.strokeRect(x++, 10, 80, 80);

Upvotes: 1

Related Questions