HTML canvas stroke()Method
Example
Draw a path shaped as the red letter L:
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();
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
![]()
![]()
![]()
![]()
![]()
Internet Explorer 9, Firefox, Opera, Chrome, and Safari support the stroke() method.
Note:Internet Explorer 8 and earlier versions do not support the <canvas> element.
Definition and Usage
The stroke() method actually draws the path defined by the moveTo() and lineTo() methods. The default color is black.
Tip:Use thestrokeStyleproperty to draw another color/gradient.
| JavaScript syntax: | context.stroke(); |
|---|
HTML canvas Reference Other Extensions