THE WORLD'S LARGEST WEB DEVELOPER SITE

HTML canvas stroke() Method

❮ HTML Canvas Reference

Example

Draw a path, shaped as the letter L - in a red color:

YourbrowserdoesnotsupporttheHTML5canvastag.

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 = "red";
ctx.stroke();
Try it Yourself »

Browser Support

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

Method
stroke() Yes 9.0 Yes Yes Yes

Definition and Usage

The stroke() method actually draws the path you have defined with all those moveTo() and lineTo() methods. The default color is black.

Tip: Use the strokeStyle property to draw with another color/gradient.

JavaScript syntax: context.stroke();

❮ HTML Canvas Reference