html tutorial - clearRect() Method in HTML5 Canvas - html5 - html code - html form

Learn html - html tutorial - Clearrect method in html5 canvas - html examples - html programs
- The clearRect() is a method of HTML <canvas> element.
- It is used to erase a specified pixel in the canvas rectangle.
Syntax for clearRect() Method in HTML5 Canvas:
context.clearRect(x,y,width,height);
Attributes values for clearRect() Method in HTML5 Canvas:
ssssssssssssssValue | Description |
---|---|
x | The x axis coordinate of the rectangle starting point |
y | The y axis coordinate of the rectangle starting point. |
width | It is used to set a width for the rectangle. |
height | It is used to set a height for the rectangle. |
Sample Coding for clearRect() Method in HTML5 Canvas:
Tryit<!DOCTYPE html>
<html>
<head>
<title>Wikitechy HTML Canvas clearRect with example</title>
</head>
<body>
<h2>HTML Canvas clearRect with example</h2>
<canvas id="wikitechyCanvas" width="370" height="200"
style="border:1px solid blue;">
</canvas>
<script>
var a = document.getElementById("wikitechyCanvas");
var context = a.getContext("2d");
context.fillStyle = "green";
context.fillRect(35, 20, 300, 160);
context.clearRect(90, 70, 170, 70);
</script>
</body>
</html>
Code Explanation for clearRect() Method in HTML5 Canvas:

- ”wikitechyCanvas” is used to define the id attribute value for canvas element.
- The getElementById(); method is used to get the element that has the id attributes value as “wikitechyCanvas”.
- a.getContext(“2d”) method is returns a two-dimensional drawing context on the canvas
- fillstyle property is used to fill the green color to the rectangle.
- The fillrect() method is used to draw a green color rectangle on the canvas with the help of fillStyle property.
- The clearRect() method is used to erase specified pixel from a filled rectangle on the canvas.
Output for clearRect() Method in HTML5 Canvas:

- The canvas rectangle with blue border.
- This shows that a rectangle drawn by using fillRect method.
- This shows that a clearRect() method is erase a specified pixel from a filled rectangle.
Browser Support for clearRect() Method in HTML5 Canvas:
![]() |
![]() |
![]() |
![]() |
![]() |
---|---|---|---|---|
Yes | 9.0 | Yes | Yes | Yes |