Tutorial by Examples

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: clearRect is dependent on the transformation matrix. To deal with this, it's possible to reset the transformation matrix befor...

It's possible to write directly to the rendered image data using putImageData. By creating new image data then assigning it to the canvas, you will clear the entire screen. var imageData = ctx.createImageData(canvas.width, canvas.height); ctx.putImageData(imageData, 0, 0); Note: putImageData is...

It's possible to clear complex shaped regions by changing the globalCompositeOperation property. // All pixels being drawn will be transparent ctx.globalCompositeOperation = 'destination-out'; // Clear a triangular section ctx.globalAlpha = 1; // ensure alpha is 1 ctx.fillStyle = '#000'; /...

Rather than use clearRect which makes all pixels transparent you may want a background. To clear with a gradient // create the background gradient once var bgGrad = ctx.createLinearGradient(0,0,0,canvas.height); bgGrad.addColorStop(0,"#0FF"); bgGrad.addColorStop(1,"#08F"); ...

Clear the canvas using compositing operation. This will clear the canvas independent of transforms but is not as fast as clearRect(). ctx.globalCompositeOperation = 'copy'; anything drawn next will clear previous content.