HTML Reference Manual

HTML tag大全

HTML: <template> tag

HTML canvas stroke() method

The HTML canvas stroke() method is used to draw paths. This path is drawn using the moveTo() and lineTo() methods.

HTML canvas reference manual

Online Example

Draw a path, the shape is a blue letter L and then draw a vertical line:

JavaScript：

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML canvas stroke() method usage-Basic Tutorial(w3(codebox.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.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(20,100);
ctx.lineTo(70,100);
ctx.strokeStyle="blue";
ctx.stroke();
ctx.beginPath();
ctx.moveTo(100,　200);
ctx.lineTo(100,　100);
ctx.strokeStyle = "blue";
ctx.stroke();
</script>　
</body>
</html>

Test and see ‹/›

Browser compatibility

IEFirefoxOperaChromeSafari

Internet Explorer 9and Firefox, Opera, Chrome, and Safari support 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:Please use strokeStyle property to draw another color/gradient.

JavaScript syntax:	context.stroke();

HTML canvas reference manual

HTML: <template> tag