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

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

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