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

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

The strokeRect is a method of HTML <canvas> element.
It is used to draw a no fill rectangle on the canvas.
The default color of the filled rectangle is black.
The default color of the strokeRect() is black.

Syntax for strokeRect() Method in HTML5 Canvas:

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

Parameter values for strokeRect() 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 strokeRect() Method in HTML5 Canvas:

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

Code Explanation for strokeRect() Method in HTML5 Canvas:

strokeRect() 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 attribute with the “wikiCanvas” value.
a.getContext(“2d”) method is returns a two-dimensional drawing context on the canvas.
The strokeRect() method is used to create a no fill rectangle in the canvas.