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


Now we just have to select which of the pair of arcs to use. This is what the sweep flag is for. One of the pairs of arcs will run clockwise from the start to finish point and the other runs anticlockwise. If the point on the left of the diagrams is the start point setting sweep to 0 selects the anticlockwise arcs:

SVGpath4

Setting sweep to 1 selects the clockwise arcs:

SVGpath5
You can now appreciate that by setting size and sweep together you can pick out just one of the possible arcs. For example:

path1=new Path2D("M50 50 A40 40 0 0 0 100 80");

draws an arc from 50,50 to 100,80 with radii equal to 40. As both the size and sweep flags are 0 this selects the small anticlockwise arc:

 SVGpath6


If you change the string to:

path1=new Path2D("M50 50 A40 40 0 1 1 100 80");

i.e. size and sweep set to 1, it draws the large clockwise arc:

SVGpath7

This is a very flexible approach to drawing arcs, but it suffers from one major problem – how do you draw a complete circle or ellipse?

To specify a complete circle or ellipse the start and end point have to be the same and this doesn’t work. If you try:

path1=new Path2D("M100 80 A40 40 0 1 1 100 80");

nothing is drawn as there are an infinity of circles that pass through the same point – you need a second point to fix the position.

There are a number of solutions to this problem but no accepted best solution. One possibility is to specify the start and end points a small distance apart and then close the path. A possibly better solution is to draw two half circles or ellipses. For example:

path1=new Path2D("M100 80 A40 40 0 0 1 180 80 A40 40 0 0 1 100 80");

This draws a perfect circle by drawing a semicircle from x,y to x+2r,y and then another from the current point back to x,y where r is the radius and x,y is the left edge of the circle.

SVGpath8
If you want to use x,y as the center then the method is move to x-r,y, draw a semicircle radius r to x+r,y and then close the path by drawing a semicircle to x-r,y.

SVGpath9
It is worth restating that all of these commands have relative versions corresponding to the same command letter but in lower case.

In book but not in this extract

  • 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: 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.

kotlin book

 

Comments




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



Last Updated ( Monday, 27 February 2023 )