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.

Now available as a paperback or ebook from Amazon.

JavaScript Bitmap Graphics
With Canvas

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>

To be informed about new articles on I Programmer, sign up for our weekly newsletter, subscribe to the RSS feed and follow us on Twitter, Facebook or Linkedin.

Comments

Make a Comment or View Existing Comments Using Disqus

or email your comment to: comments@i-programmer.info