HTML Canvas - Path Elements

The path is nothing but forming/drawing a basic shape constructed between two points, it can be defined as a list of points, connected by segments of lines, arcs, curves, etc. that can be used to make different shapes.

You can draw a path using the methods provided by the paths2D interface of HTML5 canvas.

Path elements

Path elements are various basic elements like curves, lines, and arcs used to form a path. Following are the methods provided by HTML5 Canvas API to draw various path elements

S.No	Method & Description
1	moveTo() We use a virtual pointer while drawing with the path. It is always located at a specified point which can be accessed using the moveTo(x, y) method.
2	ineTo() This method draws a line from the virtual pointer to the point given as parameters in the lineTo() method. Before drawing a line, we must use the moveTo() function to send the cursor to the starting point from which the line should be drawn.
3	arcTo() This method will draw an arc using the path. It takes two points and a radius as parameters. The arc is drawn from start point to end point with the curvature using radius.
4	quadraticCurveTo() This function will draw a curve using one control point which is taken in reference to drawing the curve between the two points.
5	bezierCurveTo() This function will draw a curve between two points using two control points which determines the structure of the curve.

Beginning and closing a Path

Since there are many functions involved to draw a Path, we use the methods to start and close the path using beginPath() and closePath() respectively. A simple code snippet is shown below on how to use path in the JavaScript code.

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.beginPath();
// ..... path operations
context.closePath();

In the above code, the operations which are written in between beginPath() and closePath() functions build the required path. The operations given after closing the path do not affect the path object and do not get executed normally.

The moveTo path element

One of the most important functions which do not provide any drawing from Canvas but is used to draw any shape from that point is by using the moveTo() function. This method moves the virtual pointer to the coordinates given as their parameters. The method is defined as

moveTo(x, y)

After initializing the Canvas element by calling beginPath(), we must call the

moveTo()

function so that the virtual pointer is moved to the given coordinates. At that point, drawing is started and the required shape is constructed.

We have to ensure that the moveTo() parameters given are inside the Canvas element. If it is outside the Canvas, the drawing will not be shown and is hidden outside the canvas.

Example

Following code draws the shape rhombus onto the Canvas element using Path 2D element methods moveTo() and lineTo()

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Rhombus</title>
   </head>
   <body onload="myFun();">
      <canvas id="canvas" width="555" height="555" style="border: 1px solid black;"></canvas>
      <script>
         function myFun() {
            var canvas = document.getElementById('canvas');
            if (canvas.getContext) {
               var ctx = canvas.getContext('2d');
               ctx.beginPath();
               ctx.moveTo(300, 100);
               ctx.lineTo(150, 200);
               ctx.lineTo(300, 300);
               ctx.lineTo(450, 200);
               ctx.lineTo(300, 100);
               ctx.fillStyle = "blue";
               ctx.fill()
            }
         }
      </script>
   </body>
</html>

Output

The rhombus generated by the above code is

The lineTo path element

The lineTo() method defines the coordinates of the end point of the line, and the stroke() or fill() method is used to make the line visible on the canvas element. Let us look at an example to see how the method works.

Example

The following example demonstrates the lineTo() method. The implementation code is given below.

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>lineTo()</title>
      <style>
         body {
            margin: 10px;
            padding: 10px;
         }
      </style>
   </head>
   <body onload="line()">
      <canvas id="canvas" width="300" height="150" style="border: 1px solid black;"></canvas>
      <script>
         function line() {
            var canvas = document.getElementById('canvas');
            var context = canvas.getContext('2d');
            context.lineWidth = 5.0;
            context.beginPath();
            context.strokeStyle = 'black';
            context.moveTo(20, 20);
            context.lineTo(250, 20);
            context.stroke();
            context.beginPath();
            context.moveTo(20, 120);
            context.lineTo(250, 120);
            context.stroke();
         }
      </script>
   </body>
</html>

Output

The output formed by the code is

The arcTo path element

This method draws an arc with the given points and uses the radius, connected to the previous point by a straight line.

arc(x, y, radius, startAngle, endAngle, counterclockwise)

The arc() method draws an arc that is centered at the point (x, y) with radius given as the third parameter. The arc is starting at startAngle and ends at endAngle going in the direction given as the last parameter.

The angles are measured from X-axis. If no direction is given in the last parameter, clockwise is used as default. Angles given in the arc() method are measured in radians only. So, we have to convert degrees to radians before giving input to the method. The last parameter counterclockwise is of Boolean datatype where the arc is drawn clockwise if given false and counterclockwise if given true. When the method arc() is called, just a path is declared and the drawing is done using the call of stroke() or fill(), which draws the arc as per the given path.

The quadraticCurveTo path element

This method draws a quadratic Bezier curve from the current position to the endpoint given using point(x, y). The curve is drawn with reference to the control point specified by (p1, p2). An example of a quadratic curve is shown below.

Example

An example to implement quadratic curve is given below.

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>quadratic curve</title>
      <style>
         body {
            margin: 10px;
            padding: 10px;
         }
      </style>
   </head>
   <body onload="curve();">
      <canvas id="canvas" width="555" height="555" style="border: 1px solid black;"></canvas>
      <script>
         function curve() {
            var canvas = document.getElementById('canvas');
            var context = canvas.getContext('2d');
            context.lineWidth = 5;
            context.beginPath();
            context.moveTo(100, 100);
            context.quadraticCurveTo(150, 175, 175, 100);
            context.stroke();
            context.closePath();
         }
      </script>
   </body>
</html>

Output

The curve generated for the above code is shown below.

The bezierCurveTo path element

This method draws a cubic Bezier curve from the position of the end point (x, y), using control points specified by (p1, p2) and (p3, p4).

Example

Following example generates a Bezier curve with the given co-ordinates and contact points. The implementation of cubic Bezier curves is given below.

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Bezier curve</title>
      <style>
         body {
            margin: 10px;
            padding: 10px;
         }
      </style>
      </script>
   </head>
   <body onload="curve();">
      <canvas id="canvas" width="555" height="555" style="border: 1px solid black;"></canvas>
      <script>
         function curve() {
            var canvas = document.getElementById('canvas');
            var context = canvas.getContext('2d');
            context.lineWidth = 5;
            context.beginPath();
            context.moveTo(100, 100);
            context.bezierCurveTo(150, 15, 300, 150, 350, 75);
            context.stroke();
            context.closePath();
         }
      </script>
   </body>
</html>