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

You can serialize all the data needed to draw a path into a javascript object

The benefit of using javascript objects is that you can further serialize the object to JSON if you need to move your paths to a different location (like back to a server).

var path1={
    lineWidth:1, 
    stroke:"blue", 
    points:[{x:10,y:10},{x:100,y:50},{x:30,y:200}]
};

Then you can use that object to draw/redraw that path

    function draw(path){

        // beginPath
        ctx.beginPath();

        // move to the beginning point of this path
        ctx.moveTo(path.points[0].x,path.points[0].y);

        // draw lines to each point on the path
        for(pt=1;pt

To change the colors of the paths, you just have to change the stroke property of the object and call draw() again:

    paths[0].stroke="orange";
    paths[1].stroke="green";
    draw();

Here is code and a Fiddle: http://jsfiddle.net/m1erickson/McZrH/

 









    Recolor