- 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 - addPath() Method
The HTML Canvas addPath() method of Path2D interface can be used to add one canvas path object to another object.
It can be only used for Path2D constructor object and cannot be applied for other objects as it needs a direct path. It is from the Path2D interface.
Syntax
Following is the syntax of HTML Canvas addPath() method −
Path2D.addPath(current-path, transform);
Parameters
Following is the list of parameters of this method −
S.No | Parameter & Description |
---|---|
1 | Current-path
A path currently available in the Canvas element to add. |
2 | transform
To apply transform to the path that is being added. |
Return value
The new path generated by using the current path is displayed on the Canvas element only when requested.
Example
The following example draws a circle from the existing path using the HTML Canvas addPath() method and displays it 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="500" height="250" style="border: 1px solid black;"></canvas> <script> var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); var path1 = new Path2D(); path1.arc(150, 150, 25, 0, 2 * Math.PI); var path2 = new Path2D(); path2.arc(300, 150, 50, 0, 2 * Math.PI); path1.addPath(path2); context.fill(path1); </script> </body> </html>
Output
The output returned by the above code on the webpage as −
Example
The following example firstly draws a rectangle onto the Canvas element and copies some data of path onto the Canvas element and applies transform to it.
<!DOCTYPE html> <html lang="en"> <head> <title<Reference API</title> <style> body { margin: 10px; padding: 10px; } </style> </head> <body> <canvas id="canvas" width="400" height="200" style="border: 1px solid black;"></canvas> <script> var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); var path1 = new Path2D(); path1.rect(10, 10, 200, 150); var path2 = new Path2D(); path2.rect(10, 10, 200, 75); let transform = new DOMMatrix(); transform.a = 1; transform.b = 0; transform.c = 0; transform.d = 1; transform.e = 150; transform.f = 0; path1.addPath(path2, transform); context.fill(path1); </script> </body> </html>
Output
The output returned by the above code on the webpage as −
To Continue Learning Please Login
Login with Google