HTML reference manual

HTML tag大全

HTML canvas closePath() method

closePath() is a Canvas 2D API method that returns the pen point to the starting point of the current subpath. It attempts to draw a straight line from the current point to the starting point. If the shape is already closed or has only one point, then this method does nothing.

HTML canvas Reference Manual

Online example

Draw a path in the shape of the letter L, and then draw a line back to the starting point:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
HTML canvas closePath() method usage-Basic Tutorial(oldtoolbag.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.closePath();
ctx.stroke();
</script>
</body>
</html>

Test and See ‹/›

Browser compatibility

IEFirefoxOperaChromeSafari

Internet Explorer 9、Firefox, Opera, Chrome, and Safari support closePath() method.

Note:Internet Explorer 8 and earlier versions do not support the <canvas> element.

Definition and usage

The closePath() method creates a path from the current point to the starting point.

Tip:use stroke()method actually draws the path on the canvas.

Tip:use fill() method to fill an image (default is black). Please use fillStyle property to fill another color/Gradient.

JavaScript syntax:	context.closePath();

Online example

Set blue as the fill color:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
HTML canvas closePath() method usage-Basic Tutorial(oldtoolbag.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.closePath();
ctx.stroke();
ctx.fillStyle="blue";
ctx.fill();
</script>
</body>
</html>

Test and See ‹/›

HTML canvas Reference Manual

HTML: <template> tag