JavaScript Canvas - Basic Paths
Written by Ian Elliot   
Monday, 02 December 2019
Article Index
JavaScript Canvas - Basic Paths
Default Path
More Arcs

Paths are the basic way to create a drawing using Canvas. In this extract from a chapter in my new book on JavaScript Graphics we look at the fundamentals of 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>

Now that we have a canvas object and a drawing context it is time to find out how to draw on the bitmap. What methods you have available depends on the drawing context you selected, but the most common is the 2D context. You might be surprised to learn that this doesn’t have a huge range of drawing commands and nearly everything you want to do has to be achieved using a custom path. In fact, the only predefined shape that is available is the rectangle and we will look at this at the end of the chapter. First let’s find out about the more general idea of a path.

Paths

In general the drawing methods work by creating a path which you can then fill or stroke (draw as an outline). You can think of a path as a specification for drawing an outline which is stored in a Path object.

You can create a Path object using its constructor:

var myPath=new Path2D();

The Path object has a range of methods which are used to specify the path. Usually the first method used is the moveTo(x,y) call which sets the start of the path to the specified position i.e. x,y. Following the moveTo you can start to draw straight lines using the lineTo(x,y) method.

For example to draw a triangle you might use:

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

This defines the path shown in the diagram:

 path1

You can’t see the path at the moment – it is just a set of co-ordinates and instructions to draw lines. To see the path you have to render it to the canvas object using one of the drawing context’s methods. You can use fill() to create a filled shape or stroke() to just draw the path as an outline. Fill and stroke are the subject of Chapter 4.

So to draw our path using the default stroke setting the entire program is:

var myPath = new Path2D(); 
myPath.moveTo(50, 50); 
myPath.lineTo(100, 100); 
myPath.lineTo(0, 100); 
myPath.lineTo(50, 50); 
ctx.stroke(myPath);

Once you have defined a Path object you can use it as many times as you want to draw the same shape. If you change the last line to:

ctx.fill(myPath);

the result is a triangle filled with the default fill color.

Notice that while you can use expressions in the path specification, these are worked out and stored. This means that the path always has a fixed location and shape. We will find out how to use paths at different locations in Chapter 5.

You can use additional moveTo function calls to create a disconnected path. Think of moveTo as moving a pen to a new location with the pen up and off the paper and lineTo as moving with the pen down. For example:

var myPath = new Path2D(); 
myPath.moveTo(50, 50); 
myPath.lineTo(100, 100); 
myPath.lineTo(0, 100); 
myPath.lineTo(50, 50); 
myPath.moveTo(50, 110); 
myPath.lineTo(0, 60); 
myPath.lineTo(100, 60); 
myPath.lineTo(50, 110); 
ctx.stroke(myPath);

draws two disconnected paths in the shape of a star:

 path2

 The two triangles are sub-paths of the complete path.

You can see that the need to create a line that moves back to the start of a sub-path is needed to create any closed path. The closePath function will draw a line from the current position back to the start of the current sub-path.

So we can write the star path program as:

var myPath = new Path2D();
myPath.moveTo(50, 50);
myPath.lineTo(100, 100);
myPath.lineTo(0, 100);
myPath.closePath();
myPath.moveTo(50, 110);
myPath.lineTo(0, 60);
myPath.lineTo(100, 60);
myPath.closePath();
ctx.stroke(myPath);

Notice that each closePath call closes the current sub-path. It is also very important to be clear that closePath doesn’t in any sense end the sub-path. You can carry on drawing and extend the sub-path from its initial position. For example, if you change the first sub-path to:

myPath.closePath();
myPath.lineTo(50, 0);

the sub-path continues and you get:

path3

 

That is, closePath draws a line back to the starting point of the sub-path and nothing else. To start a new sub-path you need to use a moveTo call.



Last Updated ( Monday, 02 December 2019 )