The CanvasRenderingContext2D
.strokeStyle
property of the Canvas 2D API specifies the color or style to use for the lines around shapes. The default is #000
(black).
See also the chapter Applying styles and color in the Canvas Tutorial.
Syntax
ctx.strokeStyle = color; ctx.strokeStyle = gradient; ctx.strokeStyle = pattern;
Options
color
- A
DOMString
parsed as CSS<color>
value. gradient
- A
CanvasGradient
object (a linear or radial gradient). pattern
- A
CanvasPattern
object (a repetitive image).
Examples
Using the strokeStyle
property to set a different color
This is just a simple code snippet using the strokeStyle
property to set a different color.
HTML
<canvas id="canvas"></canvas>
JavaScript
var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.strokeStyle = "blue"; ctx.strokeRect(10, 10, 100, 100);
Edit the code below and see your changes update live in the canvas:
Playable code
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> <input id="edit" type="button" value="Edit" /> <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.strokeStyle = "blue"; ctx.strokeRect(10, 10, 100, 100);</textarea>
var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); var edit = document.getElementById("edit"); var code = textarea.value; function drawCanvas() { ctx.clearRect(0, 0, canvas.width, canvas.height); eval(textarea.value); } reset.addEventListener("click", function() { textarea.value = code; drawCanvas(); }); edit.addEventListener("click", function() { textarea.focus(); }) textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas);
A strokeStyle
example
This example uses the strokeStyle
property to change the colors of the shapes' outlines. We use the arc()
method to draw circles instead of squares.
var ctx = document.getElementById('canvas').getContext('2d'); for (var i=0;i<6;i++){ for (var j=0;j<6;j++){ ctx.strokeStyle = 'rgb(0,' + Math.floor(255-42.5*i) + ',' + Math.floor(255-42.5*j) + ')'; ctx.beginPath(); ctx.arc(12.5+j*25,12.5+i*25,10,0,Math.PI*2,true); ctx.stroke(); } }
<canvas id="canvas" width="150" height="150"></canvas>
The result looks like this:
Screenshot | Live sample |
---|---|
Specifications
Specification | Status | Comment |
---|---|---|
WHATWG HTML Living Standard The definition of 'CanvasRenderingContext2D.strokeStyle' in that specification. |
Living Standard |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
WebKit/Blink-specific notes
- In WebKit- and Blink-based browsers, a non-standard and deprecated method
ctx.setStrokeColor()
is implemented besides this property.setStrokeColor(color, optional alpha); setStrokeColor(grayLevel, optional alpha); setStrokeColor(r, g, b, a); setStrokeColor(c, m, y, k, a);
See also
- The interface defining it,
CanvasRenderingContext2D
CanvasGradient
CanvasPattern