HTML Canvas - path2D() Method

Quiz

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 −

html_canvas_paths.htm

Print Page