Question

I’m trying to learn a bit about html5 animation, and have come up with the following code. The problem is that the rectangle just overlaps the previous frame.

Eventually, I want to change the points of my rectangle to have object change in shape.

function animate(){
        setInterval(drawCanvas, 40);

    }


function drawCanvas(){


        var canvas = document.getElementById('c'), context = canvas.getContext('2d');

        context.fillStyle = "rgb(250,250,250)";

         context.shadowOffsetX = 2; // Sets the shadow offset x, positive number is right
      context.shadowOffsetY = 2; // Sets the shadow offset y, positive number is down
      context.shadowBlur = 20; // Sets the shadow blur size
      context.shadowColor = 'rgba(0, 0, 0, 0.3)'; // Sets the shadow color
    context.beginPath();
    context.moveTo(10,10);
    context.lineTo(800,10);
    context.lineTo(800,180);
    context.lineTo(10,180);
    context.lineTo(10,10);
    context.fill();
    context.closePath(); 
}

Answer 1

You have to clear the canvas, if you don’t want overlap.

context.clearRect(0, 0, canvas.width, canvas.height);