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



Fillrect method in html5 canvas

Learn html - html tutorial - Fillrect method in html5 canvas - html examples - html programs

  • The fillRect is a method of HTML <canvas> element.
  • This method is used to draw a filled rectangle on the canvas.
  • The default color of the filled rectangle is black.
  • It has four parameters. They are, x, y, width and height.

Syntax for fillRect() Method in HTML5 Canvas:

context.fillRect(x,y,width,height);

Parameter values for fillRect() Method in HTML5 Canvas:

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 fillRect() Method in HTML5 Canvas:

Tryit<!DOCTYPE html>
<html>
    <head>
        <title>Wikitechy HTML Canvas fillRect with example</title>
    </head>
    <body>
        <h2>HTML Canvas fillRect with example</h2>
        <canvas id="wikitechyCanvas" width="370" height="200" 
        style="border:1px solid green;">
        </canvas>
        <script>
            var a = document.getElementById("wikitechyCanvas");
            var context = a.getContext("2d");
            context.fillRect(90, 50, 170, 100);
        </script>
    </body>
</html>

Code Explanation for fillRect() Method in HTML5 Canvas:

fillRect() Method in HTML5 canvas Code Explanation

  1. ”wikitechyCanvas” is used to define the value of id attribute for canvas element.
  2. The getElementById(); method is used to get the element that has the id attributes with the value “wikitechycanvas”.
  3. a.getContext(“2d”) method is returns a two-dimensional drawing context on the canvas.
  4. fillRect(90,50,170,100) method is used to draw a filled rectangle on the canvas.

Output for fillRect() Method in HTML5 Canvas:

fillRect() Method in HTML5 canvas Output

  1. The canvas rectangle with green border.
  2. This shows that a rectangle drawn by fillRect() method.

Browser Support for fillRect() Method in HTML5 Canvas:

Yes Yes Yes Yes Yes

Tips and Notes

  • The fillStyle property is used to set a color, gradient or pattern to the filled rectangle.

Related Searches to fillRect() Method in HTML5 Canvas