Latest web development tutorials
 

HTML canvas strokeStyle Propery

< Canvas Object

Example

Draw a rectangle. Use a stroke color of red:

YourbrowserdoesnotsupporttheHTML5canvastag.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeStyle="#FF0000";
ctx.strokeRect(20,20,150,100);
Try it Yourself »

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
strokeStyle 4.0 9.0 3.6 4.0 10.1

Definition and Usage

The strokeStyle property sets or returns the color, gradient, or pattern used for strokes.

Default value: #000000
JavaScript syntax: context.strokeStyle=color|gradient|pattern;

Property Values

Value Description Play it
color A CSS color value that indicates the stroke color of the drawing. Default value is #000000 Play it »
gradient A gradient object (linear or radial) used to create a gradient stroke  
pattern A pattern object used to create a pattern stroke  

Examples

More Examples

Example

Draw a rectangle. Use a gradient stroke:

YourbrowserdoesnotsupporttheHTML5canvastag.

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);
Try it Yourself »

Example

Write the text "Big smile!", with a gradient stroke:

YourbrowserdoesnotsupporttheHTML5canvastag.

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);
Try it Yourself »

< Canvas Object