Learn Create Your Own Split Screen

Next Page

The obvious problem with this code is that while each new rectangle is being drawn, the previous ones are being left behind.

The canvas is like a piece of paper -- if you draw something and then draw something else, they're both visible.

To do proper animation, you need to start each frame with a blank canvas.

ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);


clearRect simply clears a portion of the canvas. We're clearing from x=0 and y=0 (the top-left corner), and we're clearing as wide as the canvas is wide, and as high as it is high.

Now our rectangle is falling cleanly.