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:

ssssssssssssss

Value	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:

clearRect() method in HTML5 canvas Code Explanation

”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:

clearRect() method in HTML5 canvas Output

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.