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




Clearrect method in html5 canvas

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

  1. ”wikitechyCanvas” is used to define the id attribute value for canvas element.
  2. The getElementById(); method is used to get the element that has the id attributes value as “wikitechyCanvas”.
  3. a.getContext(“2d”) method is returns a two-dimensional drawing context on the canvas
  4. fillstyle property is used to fill the green color to the rectangle.
  5. The fillrect() method is used to draw a green color rectangle on the canvas with the help of fillStyle property.
  6. 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

  1. The canvas rectangle with blue border.
  2. This shows that a rectangle drawn by using fillRect method.
  3. 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

Related Searches to clearRect() method in HTML5 Canvas

Adblocker detected! Please consider reading this notice.

We've detected that you are using AdBlock Plus or some other adblocking software which is preventing the page from fully loading.

We don't have any banner, Flash, animation, obnoxious sound, or popup ad. We do not implement these annoying types of ads!

We need money to operate the site, and almost all of it comes from our online advertising.

Please add wikitechy.com to your ad blocking whitelist or disable your adblocking software.

×