HTML canvas stroke() method

Definition and Usage

stroke() methods actually draw out the path through moveTo() and lineTo() The path defined by the method. The default color is black.

Hint:Please use strokeStyle Properties 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 property.

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.