- HTML Canvas Tutorial
- HTML Canvas - Home
- HTML Canvas - Introduction
- Environmental Setup
- HTML Canvas - First Application
- HTML Canvas - Drawing 2D Shapes
- HTML Canvas - Path Elements
- 2D Shapes Using Path Elements
- HTML Canvas - Colors
- HTML Canvas - Adding Styles
- HTML Canvas - Adding Text
- HTML Canvas - Adding Images
- HTML Canvas - Canvas Clock
- HTML Canvas - Transformations
- Composting and Clipping
- HTML Canvas - Basic Animations
- Advanced Animations
- HTML Canvas API Functions
- HTML Canvas - Element
- HTML Canvas - Rectangles
- HTML Canvas - Lines
- HTML Canvas - Paths
- HTML Canvas - Text
- HTML Canvas - Colors and Styles
- HTML Canvas - Images
- HTML Canvas - Shadows and Transformations
- HTML Canvas Useful Resources
- HTML Canvas - Quick Guide
- HTML Canvas - Useful Resources
- HTML Canvas - Discussion
HTML Canvas - path2D() Method
The HTML Canvas path2D() constructor method returns a newly created path2D object consisting of path data.
Syntax
Following is the syntax of HTML Canvas path2D() method −
Path2D(path, d);
Parameters
Following is the list of parameters of this method −
S.No | Parameter & Description |
---|---|
1 | path
Other path from which a copy of the path argument is created. |
2 | d
SVG path data value given to create a path based on the description provided. |
Return Value
It returns a newly created path2D object which can be further used to draw paths easily on the Canvas element.
Example 1
The following example adds strokes to a rectangle on the Canvas element using HTML Canvas path2D() method.
<!DOCTYPE html> <html lang="en"> <head> <title>Reference API</title> <style> body { margin: 10px; padding: 10px; } </style> </head> <body> <canvas id="canvas" width="300" height="200" style="border: 1px solid black;"></canvas> <script> var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); var path = new Path2D(); path.rect(30, 20, 150, 100); context.stroke(path); </script> </body> </html>
Output
The output returned by the above code on the webpage as −
Example 2
The following example draws a circle onto the Canvas element using the path2D() constructor method.
<!DOCTYPE html> <html lang="en"> <head> <title>Reference API</title> <style> body { margin: 10px; padding: 10px; } </style> </head> <body> <canvas id="canvas" width="300" height="200" style="border: 1px solid black;"></canvas> <script> var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); var path = new Path2D(); path.arc(140, 100, 55, 0, 2 * Math.PI);; context.stroke(path); </script> </body> </html>
Output
The output returned by the above code on the webpage as −
Example 3
By using path2D() method, the following example draws combined shapes on the canvas element.
<!DOCTYPE html> <html lang="en"> <head> <title>Reference API</title> <style> body { margin: 10px; padding: 10px; } </style> </head> <body> <canvas id="canvas" width="300" height="200" style="border: 1px solid black;"></canvas> <script> var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); var path = new Path2D(); path.rect(25, 25, 250, 150); context.stroke(path); let path1 = new Path2D(); path1.moveTo(220, 60); path1.arc(100, 100, 30, 0, 2 * Math.PI); context.fill(path1); let path2 = new Path2D(); path2.moveTo(220, 60); path2.arc(200, 100, 30, 0, 2 * Math.PI); context.fill(path2); </script> </body> </html>
Output
The output returned by the above code on the webpage as −
To Continue Learning Please Login
Login with Google