Overview of the basic path drawing commands lines and curves

suggest change


TODO: Link each of the drawing commands below to their individual examples. I don’t know how to do this since the links to the individual examples point towards the “draft” folder.

TODO: Add examples for these path “action” commands: stroke(), fill(), clip()



A path defines a set of lines and curves which can be visibly drawn on the Canvas.

A path is not automatically drawn on the Canvas. But the path’s lines & curves can be drawn onto the Canvas using a styleable stroke. And the shape created by the lines and curves can also be filled with a styleable fill.

Paths have uses beyond drawing on the Canvas:

The basic path drawing commands are:

Description of the basic drawing commands:



Begins assembling a new set of path commands and also discards any previously assembled path.

The discarding is an important and often overlooked point. If you don’t begin a new path, any previously issued path commands will automatically be redrawn.

It also moves the drawing “pen” to the top-left origin of the canvas (==coordinate[0,0]).


context.moveTo(startX, startY)

Moves the current pen location to the coordinate [startX,startY].

By default all path drawings are connected together. So the ending point of one line or curve is the starting point of the next line or curve. This can cause an unexpected line to be drawn connecting two adjacent drawings. The context.moveTo command basically “picks up the drawing pen” and places it at a new coordinate so the automatic connecting line is not drawn.


context.lineTo(endX, endY)

Draws a line segment from the current pen location to coordinate [endX,endY]

You can assemble multiple .lineTo commands to draw a polyline. For example, you could assemble 3 line segments to form a triangle.


context.arc(centerX, centerY, radius, startingRadianAngle, endingRadianAngle)

Draws a circular arc given a centerpoint, radius and starting & ending angles. The angles are expressed as radians. To convert degrees to radians you can use this formula: radians = degrees * Math.PI / 180;.

Angle 0 faces directly rightward from the center of the arc. To draw a complete circle you can make endingAngle = startingAngle + 360 degrees (360 degrees == Math.PI2): `context.arc(10,10,20,0,Math.PI2);

By default, the arc is drawn clockwise, An optional [true|false] parameter instructs the arc to be drawn counter-clockwise: context.arc(10,10,20,0,Math.PI*2,true)


context.quadraticCurveTo(controlX, controlY, endingX, endingY)

Draws a quadratic curve starting at the current pen location to a given ending coordinate. Another given control coordinate determines the shape (curviness) of the curve.


context.bezierCurveTo(control1X, control1Y, control2X, control2Y, endingX, endingY)

Draws a cubic Bezier curve starting at the current pen location to a given ending coordinate. Another 2 given control coordinates determine the shape (curviness) of the curve.


context.arcTo(pointX1, pointY1, pointX2, pointY2, radius);

Draws a circular arc with a given radius. The arc is drawn clockwise inside the wedge formed by the current pen location and given two points: Point1 & Point2.

A line connecting the current pen location and the start of the arc is automatically drawn preceding the arc.


context.rect(leftX, topY, width, height)

Draws a rectangle given a top-left corner and a width & height.

The context.rect is a unique drawing command because it adds disconnected rectangles. These disconnected rectangles are not automatically connected by lines.



Draws a line from the current pen location back to the beginning path coordinate.

For example, if you draw 2 lines forming 2 legs of a triangle, closePath will “close” the triangle by drawing the third leg of the triangle from the 2nd leg’s endpoint back to the first leg’s starting point.

This command’s name often causes it to be misunderstood. context.closePath is NOT an ending delimiter to context.beginPath. Again, the closePath command draws a line – it does not “close” a beginPath.

Feedback about page:

Optional: your email if you want me to get back to you:

Table Of Contents