To clear a canvas for redrawing in HTML5, you can use the clearRect() method from the <canvas> element’s context. This method clears a specific area of the canvas, allowing you to erase the previous content before drawing new ones.
Here’s how to do it:
1. Using clearRect() Method
The clearRect() method clears a rectangular portion of the canvas, so to clear the entire canvas, you would clear the entire area.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clear Canvas Example</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="500" height="500"></canvas>
<button onclick="clearCanvas()">Clear Canvas</button>
<script>
// Get the canvas element and its context
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Function to draw something on the canvas
function drawSomething() {
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 150, 150); // Draw a blue rectangle
}
// Call the function to draw something
drawSomething();
// Function to clear the canvas
function clearCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the entire canvas
}
</script>
</body>
</html>
Explanation:
clearRect(x, y, width, height): Clears the canvas within the specified rectangular area. In this example, it clears the entire canvas by specifying the top-left corner(0, 0)and the width and height of the canvas.drawSomething(): This is a sample function to draw something (a blue rectangle) on the canvas.clearCanvas(): This function is triggered when the “Clear Canvas” button is clicked, and it clears the canvas before redrawing.
2. Clearing Canvas Without Redrawing
If you just want to clear the canvas without immediately drawing anything new, you can just call the clearRect() method without redrawing.
Example:
<script>
// Just clear the canvas without redrawing anything
function clearCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the entire canvas
}
</script>
3. Redrawing After Clearing
If you want to clear the canvas and redraw new shapes, you can call clearRect() first, then proceed to draw the new content as needed.
Performance Considerations
- Clearing the entire canvas is usually quick, but if you have a large canvas or complex drawings, it might take more time. You can optimize by clearing only the region where the changes are needed.
By using clearRect(), you ensure that the canvas is cleared before you draw again, keeping it clean and ready for new graphics.