JavaScript Canvas - SVG Paths
Written by Ian Elliot   
Monday, 27 February 2023
Article Index
JavaScript Canvas - SVG Paths
Which Arcs?

Paths form the outlines that will fill to make graphics. This extract from Ian Elliot's book on JavaScript Graphics looks at how to use SVG paths.

Now available as a paperback or ebook from Amazon.

JavaScript Bitmap Graphics
With Canvas

largecover360

 

Contents

  1. JavaScript Graphics
  2. Getting Started With Canvas
  3. Drawing Paths
      Extract: Basic Paths
      Extract: SVG Paths
      Extract: Bezier Curves
  4. Stroke and Fill
      Extract: Stroke Properties 
      Extract: Fill and Holes
      Extract: Gradient & Pattern Fills
  5. Transformations
      Extract: Transformations
      Extract: Custom Coordinates 
      Extract  Graphics State
  6. Text
      Extract: Text, Typography & SVG 
      Extract: Unicode
  7. Clipping, Compositing and Effects
      Extract: Clipping & Basic Compositing
  8. Generating Bitmaps
      Extract:  Introduction To Bitmaps
      Extract :  Animation 
  9. WebWorkers & OffscreenCanvas
      Extract: Web Workers
      Extract: OffscreenCanvas
  10. Bit Manipulation In JavaScript
      Extract: Bit Manipulation
  11. Typed Arrays
      Extract: Typed Arrays 
  12. Files, blobs, URLs & Fetch
      Extract: Blobs & Files
      Extract: Read/Writing Local Files
      Extract: Fetch API **NEW!
  13. Image Processing
      Extract: ImageData
      Extract:The Filter API
  14. 3D WebGL
      Extract: WebGL 3D
  15. 2D WebGL
    Extract: WebGL Convolutions

<ASIN:B07XJQDS4Z>

<ASIN:1871962579>

<ASIN:1871962560>

In book but not in this extract

  • Paths
  • The Default Path Object
  • The Rectangle
  • Circles and Ellipses
  • Ellipse
  • The arcTo Function
  • Bezier Curves
  • Using SVG Paths

You don’t have to know anything about SVG paths to make use of the notation that it introduces to specify a path. The basic idea is that there is a set of single letter commands that you can include in a string and these define the path.

For example, M means moveTo and so a string “M50,50” means the same thing as

moveTo(50,50);

The commands available that are the direct equivalent of function calls are:

  • Mx y = moveTo(x,y)

  • Lx y = lineTo(x,y)

  • Qx1 y1 x y= quadraticCurveTo(x1.y1,x,y)

  • Cx1 y1 x2 y2 x y = bezierCurveTo(x1,y1,x2,y2,x,y)

  • Z = closePath()

You can use a string specifying the path in the Path2D constructor.

For example:

var path=new Path2D(“M50 50 L100 100”);

creates a path that is identical to:

var path=new Path2D();
path.moveTo(50,50);
path.lineTo(100,100);

You might ask at this point what is the advantage? The string notation is much more compact than the function calls. In addition it goes beyond what the function calls can do. For example, if you use the same string commands in lower case then the co-ordinates are all taken to be relative to the current position. This is very useful as to get relative forms of the function calls you have to do arithmetic.

If you change the previous example to:

var path=new Path2D(“m50 50 l100 100”);

it creates a path that moves to cx+50, cy+50 where cx and cy is the current position and then draws a line 100 pixels horizontally and 100 pixels vertically, i.e. to cx+50+100,cy+50+100.

There are also two additional line drawing commands:

  • Hx is a “horizontal line to” command

  • Vy is a “vertical line to” command

which only require you to supply an x or a y co-ordinate. For example “H50” draws a line from the current position to 50,cy.

The commend for drawing an elliptical arc command is A:

  • Arx ry rot size sweep x y

This draws an arc, with radii rx and ry, between the current point and x, y. The rot parameter controls the rotation of the radii. The size and sweep flags are confusing at first, but not when you realize that there are usually two ellipses that connect two points – a big arc and a small arc.

SVGpath1 


Which of these four possible arcs do you want to use to connect the start point to the end point? This is what the size and sweep flags are for. The size flag either selects the small arcs or the large arcs. In this case large or small is measured using the angle specified by sweep. If you set size to 0 then you select the two small arcs:

SVGpath2

 

If you set size to 1 you select the two large arcs:

SVGpath3



Last Updated ( Monday, 27 February 2023 )