Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to clear the canvas using clearRect in HTML?
We will cover the process of creating a canvas element in the HTML document, selecting it in JavaScript code, and using the clearRect method to clear the entire canvas or a specific area of it. This is a useful technique for creating dynamic and interactive graphics in HTML, and we will walk user through the steps needed to implement it in your own projects. In this tutorial, we will be discussing how to clear the canvas using the clearRect method in HTML.
Clearing Canvas with clearRect
Users can follow the steps below to clear the canvas using clearRect
Step 1 − First, users need to create a canvas element in our HTML document. This can be done by adding the following code to the body of our HTML file −
<canvas id="myCanvas"></canvas>
Step 2 − Next, we need to select the canvas element in our JavaScript code so that we can access its methods. This can be done by using the getElementById() method, like so −
let canvas = document.getElementById("myCanvas");
Step 3 − Once we have the canvas element selected, we can use the getContext() method to access the canvas's 2D rendering context. This is the object that we will use to draw on the canvas and clear it.
var ctx = canvas.getContext("2d");
Step 4 − Now that we have the canvas's 2D rendering context, we can use the clearRect() method to clear the canvas.
ctx.clearRect(0, 0, canvas.width, canvas.height);
With this single line of code, we have effectively cleared the entire canvas
Additionally, user can also use this method to clear a specific area of the canvas by providing the coordinates and dimensions of the area we want to clear.
For example, if users want to clear a rectangle that starts at the point (50, 50) and has a width of 100 and a height of 100, we would use the following code −
ctx.clearRect(50, 50, 100, 100);
Example 1
In this example, we draw a circle on the canvas using the arc() method and fill() method.Then we used the requestAnimationFrame method and defined a function clearCircle() that will clear a specific area of the canvas by decreasing the radius in each frame by 5 pixels and then redraw the circle with the new radius. This animation will create an effect of shrinking the circle and clearing the canvas.
<html>
<body>
<h2>Clearing The Canvas with <I>clearRect</I></h2>
<canvas id="myCanvas" ></canvas>
<script>
let canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
// Draw a circle on the canvas
ctx.beginPath();
ctx.arc(75, 75, 50, 0, 2 * Math.PI);
ctx.fill();
// Animate the clearing of a specific area of the canvas
var x = 75;
var y = 75;
var radius = 50;
function clearCircle() {
ctx.clearRect(x - radius, y - radius, radius * 2, radius * 2);
radius -= 5;
ctx.beginPath();
ctx.arc(x, y, radius, 0, 2 * Math.PI);
ctx.fill();
if (radius > 0) {
requestAnimationFrame(clearCircle);
}
}
requestAnimationFrame(clearCircle);
</script>
</body>
</html>
Example 2
In the example below, we add an event listener to the button element that listens for a click event, when the button is clicked, it calls the callback function that uses the clearRect() method to clear a specific area of the canvas by providing the coordinates and dimensions of the top-left corner and the width and height of the area we want to clear. This way, we can allow the user to clear a specific area of the canvas by interacting with the page.
<html>
<body>
<h2>Clearing The Canvas with <I>clearRect</I> using click event</h2>
<canvas id="myCanvas" ></canvas>
<button id="clearBtn">Clear</button>
<script>
let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
let clearBtn = document.getElementById("clearBtn");
// Draw some elements on the canvas
ctx.fillRect(25, 25, 50, 50);
ctx.fillRect(75, 75, 50, 50);
// Clear a specific area of the canvas on button click
clearBtn.addEventListener("click", function() {
ctx.clearRect(50, 50, 25, 25);
});
</script>
</body>
</html>
We learned to clear the canvas in HTML using the clearRect. This method is a quick and easy process that can be accomplished with just a few lines of code. By creating a canvas element in our HTML document, selecting it in our JavaScript code, and using the clearRect method, we can effectively clear the entire canvas or a specific area of it.
This method is a powerful tool for creating dynamic and interactive graphics in HTML.
382 Views
