javascript - save a canvas object as json -

how serialize canvas object, 1 below?

            context.beginpath();             context.rect(188, 50, 200, 100);             context.fillstyle = 'yellow';             context.fill();             context.linewidth = 7;             context.strokestyle = 'black';             context.stroke(); 

since it's interacting canvas context procedurally (is right terminology?) don't think it's possible. save objects easier manipulate them.

i mean how create 2 items 1 above, modifying x,y starting positions? can think of eval know horribly slow down drawing on canvas.

if want reposition drawing without fussing each of original coordinates, use context.translate moves canvas [0,0] origin desired position on canvas.

function draw(offsetx,offsety){     // translate [0,0] origin of canvas [offsetx,offsety]     context.translate(offsetx,offsety);      // draw original rectangle (no changes required coordinates     context.beginpath();     context.rect(188, 50, 200, 100);     context.fillstyle = 'yellow';     context.fill();     context.linewidth = 7;     context.strokestyle = 'black';     context.stroke();      // clean up! reverse translation     context.translate(-offsetx,-offsety); } 

if want send original canvas commands different device must serialize context drawing commands. see previous q&a showing how save canvas drawing commands string. string can sent elsewhere (f.ex using ajax or websockets) , receiving device can "replay" commands.