HTML canvas strokeStyle Property
Last Updated :
09 Jun, 2023
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.
html
<!DOCTYPE html>
< html >
< head >
< title >
HTML canvas strokeStyle property
</ title >
</ head >
< body >
< canvas id = "GFG" width = "500" height = "300" ></ canvas >
< script >
var x = document.getElementById("GFG");
var context = x.getContext("2d");
// Create rectangle
context.rect(50, 50, 350, 200);
// Set stroke color
context.strokeStyle = "green";
// Set stroke width
context.lineWidth = "10";
context.stroke();
</ script >
</ body >
</ html >
|
Output: Example 2: This example uses canvas strokeStyle property to set the stroke color using linear gradient.
html
<!DOCTYPE html>
< html >
< head >
< title >
HTML canvas strokeStyle property
</ title >
</ head >
< body >
< canvas id = "GFG" width = "500" height = "300" ></ canvas >
< script >
var x = document.getElementById("GFG");
var context = x.getContext("2d");
// Create linear gradient
var gr = context.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
context.strokeStyle = gr;
// Set line width
context.lineWidth = 5;
// Create rectangle
context.rect(50, 50, 350, 200);
context.stroke();
</ script >
</ body >
</ html >
|
Output: Supported Browsers: The browsers supported by canvas strokeStyle property are listed below:
- Google Chrome
- Internet Explorer 9.0
- Firefox
- Safari
- Opera
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...