HTML Reference Manual

HTML Tag Reference

HTML canvas strokeStyle attribute

The strokeStyle property in HTML canvas is used to set the color, gradient, or pattern of the stroke. The <canvas> element allows you to draw graphics on the web page using JavaScript. Each canvas has two elements that describe the height and width of the canvas, respectively, height and width.

HTML canvas reference manual

Online Example

Draw a rectangle with red stroke color:

Online demonstration of using the HTML canvas strokeStyle property:

Example

<!DOCTYPE html>
<html>
<head>
<title>HTML canvas strokeStyle property usage (Basic Tutorial Website oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3>
Your browser does not support HTML5　canvas tag.</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeStyle="#FF0000";
ctx.strokeRect(20,20,150,100);
</script>
</body>
</html>

Test see ‹/›

Browser compatibility

IEFirefoxOperaChromeSafari

Internet Explorer 9Firefox, Opera, Chrome, and Safari support the strokeStyle property.

Note:Internet Explorer 8 and earlier versions do not support the <canvas> element.

Definition and usage

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

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

Attribute value

Value	Description
color	indicating the drawing stroke color CSS color value). The default value is #000000.
gradient	gradient objects used to fill the drawing (linear or radial).
pattern	used to create pattern stroke pattern object.

Online Example

Draw a rectangle. Use gradient stroke:

Online demonstration of using the HTML canvas strokeStyle property:

Example

<!DOCTYPE html>
<html>
<head>
<title>HTML canvas strokeStyle property usage (Basic Tutorial Website oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3>
Your browser does not support HTML5　canvas tag.</canvas>
<script>
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");
//Gradient fill
ctx.strokeStyle=gradient;
ctx.lineWidth=5;
ctx.strokeRect(20,20,150,100);
</script>
</body>
</html>

Test see ‹/›

Online Example

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

Online demonstration of using the HTML canvas strokeStyle property:

Example

<!DOCTYPE html>
<html>
<head>
<title>HTML canvas strokeStyle property usage (Basic Tutorial Website oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3>
Your browser does not support HTML5　canvas tag
</canvas>
<script>
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");
//　Gradient fill
ctx.strokeStyle=gradient;
ctx.strokeText("Big smile!",10,50);
</script>
</body>
</html>

Test see ‹/›

HTML canvas reference manual

HTML: <template> tag