The clearRect() method of the Canvas 2D API which is used to erase the pixel in a rectangular area by setting the pixel color to transparent black (rgba(0, 0, 0, 0)).
abc.clearRect(x, y, width, height);
- x, y: These paramter represents the top-left coordinate of the rectangular box.
- width: It is used to set the width of the rectangular box
- height: It is used to set the of the rectangular box
Example 1: In the following examplen the
clearRect() method is used to clear the pixel of a rectangle of size (200×300) from (50, 20).
Example 3: In this example we will erase whole canvas.
Note: Be aware that
clearRect() may cause unintended side effects if you’re not using paths properly. Make sure to call beginPath() before starting to draw new items after calling
- HTML | canvas clearRect() Method
- How to specify the width and height of the canvas using HTML ?
- HTML | DOM console.clear() Method
- HTML | DOM Style clear Property
- HTML | DOM Local Storage clear() Method
- How to put a responsive clear button inside HTML input text field ?
- HTML | Canvas Basics
- How to resize an image in an HTML 5 canvas ?
- HTML | canvas lineWidth Property
- HTML | canvas textAlign Property
- HTML | canvas Tag
- HTML | canvas font Property
- HTML | canvas lineJoin Property
- HTML | DOM Canvas Object
- HTML | Canvas Draw Bezier Curve
- How to get Pixel from HTML Canvas ?
- HTML | canvas shadowColor Property
- HTML | canvas rect() Method
- HTML | canvas fillStyle Property
- HTML | canvas strokeStyle Property
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.