strokeStyle property
Gets or sets the current style that is used for strokes (lines) on shapes.
This property is read/write.
![]() ![]() |
Syntax
| JavaScript | |
|---|
Property values
Type: any
A variable that specifies or receives one of the following:
- CSS Color
- CanvasGradient
- CanvasPattern
Exceptions
| Exception | Condition |
|---|---|
|
The p attribute is set to aCanvasPattern object that was created from a img or video element that is not of the same origin or domain as the document that owns the canvas element. |
Standards information
- HTML Canvas 2D Context, Section 5
Remarks
The style can consist of a parameter that contains a CSS color, CanvasGradient object, or CanvasPattern object.
Examples
The following code example uses strokeStyle to change the colors of three subpaths.

<html> <head> <title>StrokeStyle example</title> <script type="text/javascript"> function draw() { var canvas = document.getElementById("MyCanvas"); if (canvas.getContext) { var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.strokeStyle = "green"; // Use strokeStyle to set the color. ctx.rect(5, 5, 300, 250); ctx.stroke(); ctx.beginPath(); ctx.strokeStyle = "blue"; // Use strokeStyle to change the color. ctx.lineWidth = "5"; ctx.moveTo(100, 100); ctx.lineTo(130, 100); ctx.moveTo(170, 100); ctx.lineTo(200, 100); ctx.stroke(); ctx.beginPath(); ctx.strokeStyle = "red"; // Use strokeStyle to change the color. ctx.arc(150, 125, 100, 0, Math.PI, false); ctx.stroke(); } } </script> </head> <body onload="draw();"> <canvas id="MyCanvas" width="600" height="600">This browser or document mode doesn't support canvas</canvas> </body> </html>
See also
Show:

