html5-canvas Clearing the screen Rectangles
Example
You can use the clearRect method to clear any rectangular section of the canvas.
// Clear the entire canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
Note:
clearRectis dependent on the transformation matrix.
To deal with this, it's possible to reset the transformation matrix before you clear the canvas.
ctx.save(); // Save the current context state
ctx.setTransform(1, 0, 0, 1, 0, 0); // Reset the transformation matrix
ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
ctx.restore(); // Revert context state including
// transformation matrix
Note:
ctx.saveandctx.restoreare only requiered if you wish to keep the canvas 2D context state. In some situations save and restore can be be slow and generally should be avoided if not required.
