HTML5 Canvas: Manipulating Individual Paths

Question

How can I save a specific path to a javascript variable/array, and later manipulate it, when using an HTML5 canvas? Here\'s what I\'m doing thus far:

Answer 1

It looks like it is now possible with a new path2D object.

The new Path2D API (available from Firefox 31+) lets you store paths, which simplifies your canvas drawing code and makes it run faster. The constructor provides three ways to create a Path2D object:

new Path2D();     // empty path object
new Path2D(path); // copy from another path
new Path2D(d);    // path from from SVG path data

The third version, which takes SVG path data to construct, is especially handy. You can now re-use your SVG paths to draw the same shapes directly on a canvas as well:

var p = new Path2D("M10 10 h 80 v 80 h -80 Z");

Information is taken from Mozilla official site.