How to clear the canvas for redrawing in HTML5 ?
Last Updated :
11 Jul, 2023
The HTML5 canvas element is a powerful tool for drawing graphics, animations, and games in the web browser. However, when we want to update or redraw an existing drawing on the canvas, we need to first clear the canvas so that the new drawing does not overlap with the old one.
In this article, we will explore two different ways to clear the canvas for redrawing in JavaScript.
Canvas can be cleared for redrawing in three ways:
- Using clearRect() method.
- Setting canvas.width and canvas.height properties.
- Using fillStyle property.
Approach 1:Using clearRect() method: The clearRect() method is a built-in method in the canvas API that can be used to clear a rectangular area of the canvas. We can use this method to clear the entire canvas by passing in the coordinates of the top-left corner of the canvas and its width and height.
Example: We have drawn a red rectangle on the canvas using the fillRect() method. We are using the setTimeout() method to wait for 2 seconds and then clear the canvas using the clearRect() method.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Canvas</title>
<style>
.title {
color: green;
text-align: center;
}
h3 {
text-align: center;
}
canvas {
display: block;
margin: auto;
border: 2px solid black;
background-color: #ffffff;
}
</style>
</head>
<body>
<div>
<h1 class="title">
GeeksforGeeks
</h1>
<h3>
Clearing canvas using clearRect()
</h3>
</div>
<div>
<canvas id="myCanvas" width="400" height="200">
</canvas>
</div>
<script>
let canvas = document.getElementById('myCanvas');
let ctx = canvas.getContext('2d');
// Draw a red rectangle
ctx.fillStyle = 'red';
ctx.fillRect(50, 50, 100, 100);
// Wait for 2 seconds and clear the canvas
setTimeout(function () {
ctx.clearRect(0, 0,
canvas.width, canvas.height);
}, 2000);
</script>
</body>
</html>
|
Output:
Approach 2: Setting canvas.width and canvas.height properties: Another way to clear the canvas is by setting the canvas.width and canvas.height properties to their current values. This creates a new canvas element with the same dimensions as the old one, effectively clearing its contents.
Example: We have drawn a gradient rectangle on the canvas using the fillRect() method. We are using the setTimeout() method to wait for 2 seconds and then reset the canvas dimensions using canvas.width = canvas.width.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Canvas</title>
<style>
.title {
color: green;
text-align: center;
}
h3 {
text-align: center;
}
canvas {
display: block;
margin: auto;
border: 2px solid black;
background-color: #ffffff;
}
</style>
</head>
<body>
<div>
<h1 class="title">
GeeksforGeeks
</h1>
<h3>
Clearing the Canvas by
resetting the dimensions
</h3>
</div>
<div>
<canvas id="myCanvas" width="400" height="200">
</canvas>
</div>
<script>
let canvas = document.getElementById('myCanvas');
let ctx = canvas.getContext('2d');
const gradient = ctx.createLinearGradient(
0, 0, canvas.width, 0);
gradient.addColorStop(0, 'red');
gradient.addColorStop(0.5, 'green');
gradient.addColorStop(1, 'blue');
// Draw a rectangle with the gradient fill
ctx.fillStyle = gradient;
ctx.fillRect(50, 50, 100, 100);
// Wait for 2 seconds and reset the canvas
// dimensions to clear the canvas
setTimeout(function () {
canvas.width = canvas.width;
}, 2000);
</script>
</body>
</html>
|
Output:
.gif)
Approach 3: Using fillStyle property: Another way to clear the canvas is by using fillStyle property of the canvas context to set the fill color to a transparent color and then use the fillRect() method to fill the entire canvas with the transparent color.
Example: we first get a reference to the canvas element and the canvas context. We then draw something on the canvas using the fillRect() method. Finally, we clear the canvas for redrawing by setting the fillStyle property to a transparent color using the rgba() notation, and then using the fillRect() method to fill the canvas with the transparent color.
By filling the canvas with a transparent color, we effectively erase any previous content on the canvas and make it ready for new content.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Canvas Clear Example</title>
<style>
.title {
color: green;
text-align: center;
}
h3 {
text-align: center;
}
canvas {
display: block;
margin: auto;
border: 2px solid black;
background-color: #ffffff;
}
</style>
</head>
<body>
<div>
<h1 class="title">GeeksforGeeks</h1>
<h3>Clearing canvas using fillStyle</h3>
</div>
<div>
<canvas id="myCanvas"
width="400"
height="200">
</canvas>
</div>
<script>
const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');
// Draw something on the canvas
context.fillRect(50, 50, 100, 100);
// Clear the canvas for redrawing after 2 seconds
setTimeout(() => {
context.globalCompositeOperation = 'destination-out';
context.fillStyle = 'rgba(0, 0, 0, 1)';
context.fillRect(0, 0, canvas.width, canvas.height);
context.globalCompositeOperation = 'source-over';
}, 4000);
</script>
</body>
</html>
|
Output:
Conclusion: Clearing the canvas is an essential part of maintaining the visual integrity of your canvas drawing. In this article, we explored two different ways to clear the canvas in JavaScript, using the clearRect() method and reset the canvas dimensions. While the clearRect() method is the preferred way to clear the canvas, resetting the canvas dimensions can be useful when the canvas size is dynamic and changes frequently.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...