How to erase previous drawing on Canvas?

In programming, clearing previous drawings on the canvas typically involves several fundamental methods. Here, we use the HTML5 <canvas> element as an example to demonstrate the process.

1. Using the clearRect Method

clearRect is a straightforward method provided by the Canvas 2D API for clearing a specified rectangular area on the canvas. To remove all content from the canvas, set the parameters of clearRect to the full width and height of the canvas.

Example code:

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

// Draw some content
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 50, 50);

// Clear the entire canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);

2. Resetting the Canvas Width or Height

Setting the width or height of the <canvas> element will completely clear the canvas. This method is relatively simple but may not be suitable in certain cases as it also resets the canvas state (such as transformation matrices and style settings).

Example code:

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

// Draw some content
ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 50, 50);

// Reset width to clear the canvas
canvas.width = canvas.width;

3. Using Transparent Color Coverage

This method is not a true 'clear' but rather covers previous drawings with a transparent color. The advantage is that it can achieve a localized 'clear' effect on specific areas.

Example code:

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

// Draw some content
ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 50, 50);

// Use transparent color to cover
ctx.fillStyle = 'rgba(255, 255, 255, 0)'; // Fully transparent
ctx.fillRect(10, 10, 50, 50);

Summary

In real-world development, the choice of method depends on specific requirements and performance considerations. If you need to frequently clear the canvas, consider using the clearRect method as it is both effective and straightforward. If you do not need to preserve any state before repainting, consider resetting the canvas dimensions. For more complex localized clearing, using transparent color coverage may be an option.