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:
”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.
Output for strokeRect() Method in HTML5 Canvas:
The canvas rectangle with green border.
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.
