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




Strokerect method in html5 canvas

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

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

Output for strokeRect() Method in HTML5 Canvas:

strokeRect() Method in HTML5 canvas Output

  1. The canvas rectangle with green border.
  2. The black color rectangle shows that a rectangle drawn by using strokeRect() method.

Browser Support for strokeRect() Method in HTML5 Canvas:

Yes 9.0 Yes Yes Yes

Tips and Notes

  • The strokeStyle property is used to set a color, gradient or pattern to style the stroke.

Related Searches to strokeRect() 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.

×