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:

 path9

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);

path10

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:

path11

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:

path12

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);

 path13

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:

 path14

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.

largecover360

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

largecover360

 

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
      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 **NEW!
      Extract: OffscreenCanvas
  10. Bit Manipulation In JavaScript
      Extract: Bit Manipulation  
  11. Typed Arrays
  12. Files, blobs, URLs & Fetch
      Extract: Blobs & Files
      Extract: Read/Writing Local 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>

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.

pythondata

 



 

Comments




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



Last Updated ( Monday, 02 December 2019 )