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