JavaScript Canvas - Bezier Curves
Monday, 16 November 2020
Article Index
JavaScript Canvas - Bezier Curves
String Paths


An alternative way of creating complex Bezier curve paths is to use an editor. InkScape is a full function SVG editor which you can use to draw a shape and read off the path as a string.

For example if you use the Bezier tool to draw a rocket ship outline:

You can use the command Edit,XML editor to open the XML editor window. In this you can find the path that corresponds to the shape and copy the d property:

Copying the path to a string gives:

path1=new Path2D( "m 98.684674,206.63833 c 2.891926,-25.77092 -1.958475,-65.0136 -13.037221,-73.92172 -11.072474,8.90817 -17.526591,48.1508 -14.634563,73.92172 -9.479011,8.46903 -9.015897,17.40218 -9.068381,29.71617 l 5.92022,-0.074 c 0,0 2.493141,-15.15787 5.105513,-16.98251 l 3.15542,8.06751 -1.537022,9.15649 c 13.277647,-0.17974 7.242537,-0.17974 20.52018,0 l -1.537022,-9.15649 3.15552,-8.06751 c 2.979241,2.08093 3.605942,17.00168 3.605942,17.00168 l 6.61799,0.0548 c -0.0526,-12.31399 1.21238,-21.24714 -8.266576,-29.71617 z"); 


All of the commands after the first m are relative so you can position the rocket anywhere you want it by changing the initial m co-ordinates.

There are many other graphics editors which can be used to create paths. Usually the end product isn’t as neat as a hand-crafted path but it is much easier.

In book but not in this extract:

  • Using Multiple Paths
  • Drawing Without Paths


  • 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




  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 







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.





or email your comment to:

Last Updated ( Monday, 16 November 2020 )