html tutorial - closePath() Method in HTML5 Canvas - html5 - html code - html form
![Closepath method in html5 canvas](https://wikitechy.com/step-by-step-html-tutorials/html5-canvas/img/canvas-images/closepath-method-in-html5-canvas.gif)
Learn html - html tutorial - Closepath method in html5 canvas - html examples - html programs
- The closePath is a property of <canvas> element in Paths.
- The closePath() method designs a path from the present point back to the starting point.
Syntax for closePath() Method in HTML5 Canvas:
context.closePath();
Sample Coding for closePath() Method in HTML5 Canvas:
Tryit<!DOCTYPE html>
<html>
<head>
<title>wikitechy - HTML Canvas closePath Method</title>
</head>
<body>
<h1>wikitechy HTML Canvas closePath Method</h1>
<canvas id="wikitechyCanvas" width="200" height="200"
style="border:2px solid red;">
</canvas>
<script>
var cp= document.getElementById("wikitechyCanvas");
var cpx= cp.getContext("2d");
cpx.beginPath();
cpx.moveTo(30, 10);
cpx.lineTo(150, 75);
cpx.lineTo(15, 100);
cpx.closePath();
cpx.stroke();
</script>
</body>
</html>
Code Explanation for closePath() Method in HTML5 Canvas:
![closePath() Method in HTML5 canvas Code explanation closePath() Method in HTML5 canvas Code Explanation](https://wikitechy.com/step-by-step-html-tutorials/html5-canvas/img/canvas-images/code-explanation-closepath-method-in-html5-canvas.png)
- ”wikitechyCanvas” is used to define the value id attribute for canvas element.
- The getElementById() method is used to get the canvas element that has the id attributes with the specified value.
- cp.getContext(“2d”) method is returns a two-dimensional drawing context on the canvas.
- cpx.beginpath() method is used to begins the path or reset the current path to increase width of the line using linewidth .
- cpx.moveTo() method is used to set the starting point at (30,10)in x ,y axis.
- cpx.lineTo() method is used to set the ending point at (150,75) in x, y direction.
- cpx.lineTo() method is used to set the ending point to starting point at (15,100) in x, y direction.
- cpx.closePath() creates a path from the current point back to the starting point.
- cpx.stroke() method is used to display the graphics.
Output for closePath() Method in HTML5 Canvas:
![closePath() Method in HTML5 canvas Output closePath() Method in HTML5 canvas Output](https://wikitechy.com/step-by-step-html-tutorials/html5-canvas/img/canvas-images/output-closepath-method-in-html5-canvas.png)
- The canvas rectangle with red color border.
- Draw a path and then draw a line back to the starting point.
Browser Support for closePath() Method in HTML5 Canvas:
![]() |
![]() |
![]() |
![]() |
![]() |
---|---|---|---|---|
Yes | 9.0 | Yes | Yes | Yes |