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

If you change the arc call to:

`path1.arc(x, y, r, 0, Math.PI/2);`

which draws a quarter of a circle, you can see the lines drawn to the start and end points: If you want the circle to be a sub-path disconnected from any other sub-path then use a moveTo the start point and a moveTo the start of the next sub-path. For example, adding two moveTo calls creates three sub-paths – two lines and the quadrant:

```var path1 = new Path2D();
var x = 200;
var y = 200;
var r = 100;
path1.moveTo(100, 150);
path1.lineTo(150, 300);
path1.moveTo(300, 200);
path1.arc(x, y, r, 0, Math.PI / 2);
path1.moveTo(200, 200);
path1.lineTo(400, 400);
ctx.stroke(path1);``` Finally, notice that any arc that you draw isn’t closed. You can close it using the closePath function.

For example:

```var path1 = new Path2D();
var x = 200;
var y = 200;
var r = 100;
path1.arc(x, y, r, 0, Math.PI / 2);
path1.closePath();
ctx.stroke(path1);```

which closes the quarter circle to give:

If you were expecting a more traditional closed quadrant then to achieve this you need to add some lines from the start and end to the center of the circle: ```var path1 = new Path2D();
var x = 200;
var y = 200;
var r = 100;
path1.moveTo(x,y);
path1.arc(x, y, r, 0, Math.PI / 2);
path1.lineTo(x,y);
ctx.stroke(path1);```

which produces: ## Ellipse

The ellipse function is a generalization of the arc function. It draws part of an ellipse as specified by start and stop angles as in the case of the arc function. The difference is that you can now specify a horizontal and a vertical radius and a rotation angle:

`ellipse(x,y,rx,ry,rot,start angle, stop angle,                                         direction);`

This draws an ellipse centered on x,y with horizontal radius rx and vertical radius ry. The start angle, stop angle and direction parameters work in the same way as in the arc function. The rot parameter rotates the entire ellipse so that you can draw something more general.

For example:

`path1.ellipse(300,200,150,50,0,0,Math.PI*2);` In this case the rotation angle is zero so the horizontal and vertical radii are in their default orientation. If we specify a rotation angle of 45 degrees:

`path1.ellipse(300,200,150,50,Math.PI/4,0,Math.PI*2);`

The x radius is tilted at 45 degrees: The only other thing to be aware of is that ellipse continues the current path. A line will be drawn from the current position to the starting point of the ellipse and the final point becomes the starting point of the rest of the path. #### In chapter but not in this extract

• The arcTo Function
• Bezier Curves
• Using SVG Paths
• Bezier and String Paths
• Creating Bezier Paths
• Using Multiple Paths
• Drawing Without Paths

## Summary

• The fundamental way to draw on a canvas object is to define a path – an outline of a shape.
• Once you have a path you can use stroke, which draws a line along the path, or fill which fills the path with a solid color or pattern.

• You can avoid creating a path object by using the default Path object associated with the canvas. In most cases it is better to define path objects as these are reusable.

• The basic path creation methods are rect, arc, ellipse and two types of Bezier curve.

• You can also use the SVG path command which has many advantages. It is more like a mini-language for describing shapes.

• In many cases it is easier to use an application such as InkScape to draw paths and then transfer them to your program using an SVG path string.

• There are also a few methods that draw directly to the canvas without creating a Path or interacting with the default Path.

• The clearRect method clears the area to transparent black which is the default color for “background” pixels.

## JavaScript Bitmap GraphicsWith Canvas #### Contents

1. JavaScript Graphics
2. Getting Started With Canvas
3. Drawing Paths
Extract: Basic Paths
Extract: Bezier Curves
4. Stroke and Fill
Extract: Stroke Properties
Extract: Fill and Holes
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 **NEW!
Extract: OffscreenCanvas
10. Bit Manipulation In JavaScript
Extract: Bit Manipulation
11. Typed Arrays
12. Files, blobs, URLs & Fetch
Extract: Blobs & Files
13. Image Processing
Extract: ImageData
Extract: The Filter API
14. 3D WebGL
Extract: WebGL 3D
15. 2D WebGL
Extract: WebGL Convolutions

<ASIN:1871962625>

<ASIN:B07XJQDS4Z>

<ASIN:1871962579>

<ASIN:1871962560>

<ASIN:1871962501>

<ASIN:1871962528> 