HTML | canvas strokeStyle Property
The canvas strokeStyle property is used to set or return the stroke of color, gradient, or pattern used in the drawing.
Syntax:
context.strokeStyle=color|gradient|pattern;
Property Value:
- color: It is used to set the filled color of drawing. The default value of canvas fillStyle property is black.
- gradient: It is used to set the gradient object to fill the drawing. The gradient object are linear or radial.
- pattern: It is used to set the pattern to fill the drawing.
Example 1: This example uses canvas strokeStyle property to set the stroke color to green.
<!DOCTYPE html> <html> <head> <title> HTML canvas strokeStyle property </title> </head> <body> <canvas id="GFG" width="500" height="300"></canvas> <!-- Script to uses canvas strokeStyle property --> <script> var x = document.getElementById("GFG"); var contex = x.getContext("2d"); // Create rectangle contex.rect(50, 50, 350, 200); // Set stroke color contex.strokeStyle = "green"; // Set stroke width contex.lineWidth = "10"; contex.stroke(); </script> </body> </html> |
chevron_right
filter_none
Output:
Example 2: This example uses canvas strokeStyle property to set the stroke color using linear gradient.
<!DOCTYPE html> <html> <head> <title> HTML canvas strokeStyle property </title> </head> <body> <canvas id="GFG" width="500" height="300"></canvas> <!-- Script to uses canvas strokeStyle property --> <script> var x = document.getElementById("GFG"); var contex = x.getContext("2d"); // Create linear gradient var gr = contex.createLinearGradient(0, 0, 350, 200); // Set color and position in a gradient object gr.addColorStop("0", "green"); gr.addColorStop("0.7", "yellow"); gr.addColorStop("1.0", "blue"); // Set stroke style to gradient contex.strokeStyle = gr; // Set line width contex.lineWidth = 5; // Create rectangle contex.rect(50, 50, 350, 200); contex.stroke(); </script> </body> </html> |
chevron_right
filter_none
Output:
Supported Browsers: The browsers supported by canvas strokeStyle property are listed below:
- Google Chrome
- Internet Explorer 9.0
- Firefox
- Safari
- Opera
Recommended Posts:
- HTML | canvas font Property
- HTML | canvas shadowOffsetY Property
- HTML | canvas shadowOffsetX Property
- HTML | canvas fillStyle Property
- HTML | canvas textBaseline Property
- HTML | canvas lineJoin Property
- HTML | canvas shadowColor Property
- HTML | canvas textAlign Property
- HTML | canvas lineWidth Property
- HTML | canvas shadowBlur Property
- HTML | canvas lineCap Property
- Web HTMLCanvasElement API | Canvas Element width property
- HTML | canvas Tag
- HTML | DOM Canvas Object
- HTML | Canvas Basics
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.
