html tutorial - strokeStyle Property in HTML5 Canvas - html5 - html code - html form

Learn html - html tutorial - Strokestyle property in html5 canvas - html examples - html programs
- The strokeStyle is a property of <canvas> element in Colors, Styles, and Shadows.
- The strokeStyle property sets the color, pattern or gradient used for strokes.
Syntax for strokeStyle Property in HTML5 Canvas:
context.strokeStyle="color";
Property values for strokeStyle Property in HTML5 Canvas:
Values | Description |
---|---|
color | A CSS color value that displays the stroke color of the drawing. |
gradient | A gradient object (linear or radial) is used to design a gradient stroke |
pattern | A pattern object is used to design a pattern stroke |
Sample Coding for strokeStyle Property in HTML5 Canvas:
Tryit<!DOCTYPE html>
<html>
<head>
<title>Wikitechy HTML Canvas styleStroke Property with example</title>
</head>
<body>
<h1>HTML Canvas styleStroke Property with example</h1>
<canvas id="wikitechyCanvas" width="200" height="200"
style="border:2px solid green;">
</canvas>
<script>
var ss = document.getElementById("wikitechyCanvas");
var ssx = ss.getContext("2d");
ssx.strokeStyle = "purple";
ssx.strokeRect(30, 30, 100, 150);
</script>
</body>
</html>
Code Explanation for strokeStyle Property in HTML5 Canvas:

- “Wikitechy canvas” is used to define the value of id attribute for canvas element.
- getElementById() method is used to get the canvas element that has the id attributes with the specified value.
- ss.getContext(“2d”) method is returns a two-dimensional drawing context on the canvas.
- ssx.strokeStyle=”purple” specifies the stroke style in purple color.
- ssx.strokeRect(30,30,100,150) method is used to draw a rectangle.
Output for strokeStyle Property in HTML5 Canvas:

- The canvas rectangle with green color border.
- Using a stroke color of purple and draw a rectangle.
Browser Support for strokeStyle Property in HTML5 Canvas:
![]() |
![]() |
![]() |
![]() |
![]() |
---|---|---|---|---|
Yes | 9.0 | Yes | Yes | Yes |