HTML Canvas - Paths

Path is a continuous mapping of points as a trial which does not have repeating vertices and does can go in any angle until the final destination point is reached.

The interface CanvasRenderringContext2D and Path2D contains properties and methods to add paths onto the canvas element using the context object of interface. The interface can be used for adding paths as well as closing them on the <canvas> element.

The properties and methods available to add paths and draw shapes inside the Canvas element are given in the below table.

S.No Method & Description
1 addPath()

This method can be used to add an extra path for the current path.
2 arc()

The arc() method of Canvas API can be used to draw circular arcs to the path started.
3 arcTo()

The arcTo() method of Canvas API can be used to draw circular arcs to current path with given control points and radius as parameters.
4 beginPath()

When we have to draw graphics on Canvas element using paths, we call this method to create a new path.
5 bezierCurveTo()

The method bezierCurveTo() of CanvasRenderingContext2D interface draws
6 clip()

This method is used to clip a region of path and draw another graphics in it.

7 closePath()

The method closePath() closes the current path by doing the required operations.
8 drawFocusIfNeeded()

To add focus to an existing path or a path that is about to be created, this method can be called by the interface.
9 ellipse()

This method is used to draw an elliptical arc on the drawing surface of Canvas element.
10 fill()

This method fills the current or given path with black by default unless fillStyle property is given.
11 isPointInPath()

To check whether a point is inside or with the path, we use this method. It takes the point as parameter and returns Boolean value.
12 isPointInStroke()

This method of Canvas 2D API verifies whether the given point is inside a stroked path or not and returns Boolean value (true or false).
13 moveTo()

The context object moves the sub path to the given co-ordinates by parameters.
14 Path2D()

This constructor method creates a Path2D object from which all the shapes can be invoked and drawn onto the Canvas element.
15 quadraticCurveTo()

This method draws a quadratic Bezier curve by using the path context.
16 scrollPathIntoView()

This method of Canvas 2D API when called, scrolls the available path into view when it is passed as the parameter.
17 stroke()

This method of Canvas API adds strokes to the current path or shape which is drawn inside the Canvas element.
Advertisements