HTML canvas strokeStyle attribute
Definition and Usage
strokeStyle Sets or returns the color, gradient, or pattern used for the stroke.
Example
Example 1
Draw a rectangle. Use blue as the stroke color:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeStyle="#0000ff";
ctx.strokeRect(20,20,150,100);
Syntax
context.strokeStyle=color|gradient|pattern;
Attribute Value
| Value | Description |
|---|---|
| color | Indicates the drawing stroke color CSS Color Values). Default value is #000000. |
| gradient | The gradient object used to fill the drawing (LinearorRadial) |
| pattern | The pattern object used to create pattern strokes |
Technical Details
| Default value: | #000000 |
|---|
More examples
Example 2
Draw a rectangle. Use a gradient stroke:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var gradient=ctx.createLinearGradient(0,0,170,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// Fill with gradient
ctx.strokeStyle=gradient;
ctx.lineWidth=5;
ctx.strokeRect(20,20,150,100);
Example 3
Write the text "codew3c.com" with a gradient stroke:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Verdana";
// Create gradient
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// Fill with gradient
ctx.strokeStyle=gradient;
ctx.strokeText("Big smile!",10,50);
Browser Support
The numbers in the table indicate the first browser version that fully supports this property.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Note:Internet Explorer 8 and earlier versions do not support the <canvas> element.
