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

InkScape

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:

bezier14
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:

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

bezier16


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

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 **NEW!
  4. Stroke and Fill
      Extract: Stroke Properties 
  5. Transformations
      Extract: Transformations 
  6. Text
      Extract: Text, Typography & SVG 
  7. Clipping, Compositing and Effects
      Extract: Clipping & Basic Compositing 
  8. Generating Bitmaps
      Extract:  Introduction To Bitmaps 
  9. WebWorkers & OffscreenCanvas
      Extract: OffscreenCanvas
  10. Bit Manipulation In JavaScript
  11. Typed Arrays
  12. Files, blobs, URLs & Fetch
  13. Image Processing
      Extract: ImageData 
  14. 3D WebGL
  15. 2D WebGL
    Extract: WebGL Convolutions 

Related Articles

Reading A BMP File In JavaScript

Getting Started With SVG

SVG, JavaScript and the DOM

Getting Started with Box2D in JavaScript

<ASIN:1871962625>

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

square

 



 

Comments




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



Last Updated ( Monday, 16 November 2020 )