html tutorial - closePath() Method in HTML5 Canvas - html5 - html code - html form
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:
Sample Coding for closePath() Method in HTML5 Canvas:
Code Explanation for closePath() Method in HTML5 Canvas:
- ”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:
- 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 |