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:

strokeStyle Property in HTML5 canvas Code Explanation

“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.