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



Strokestyle property in html5 canvas

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

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

Output for strokeStyle Property in HTML5 Canvas:

strokeStyle Property in HTML5 canvas Output

  1. The canvas rectangle with green color border.
  2. Using a stroke color of purple and draw a rectangle.

Browser Support for strokeStyle Property in HTML5 Canvas:

Yes 9.0 Yes Yes Yes

Related Searches to strokeStyle Property in HTML5 Canvas