Canvas stroke() method

Definition and usage

stroke() methods actually draw out the path through moveTo() and lineTo() Method defines the path. The default color is black.

Tip:Please use strokeStyle Property to draw another color/gradient.

Example

Draw a path, the shape is a green letter L:

Your browser does not support the HTML5 canvas tag.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(20,100);
ctx.lineTo(70,100);
ctx.strokeStyle="green";
ctx.stroke();

Try it yourself

Syntax

context.stroke();

Browser support

The numbers in the table indicate the first browser version that fully supports this attribute.

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.