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