Search code examples
javascripthtmlkineticjs

kinetic js saving canvas stage

Im still learning kinecticjs and was wondering how you can save the state of the cavas?

from: http://www.html5canvastutorials.com/kineticjs/html5-canvas-save-stage-as-json-string-with-kineticjs/

      // save stage as a json string
      var json = stage.toJSON();

      console.log(json);

But how do i load this back in? Thanks

Solution

  • There is a tutorial here for loading stage from a JSON String. You just have to do :

    var json = '{"attrs":{"width":578,"height":200},"className":"Stage","children":[{"attrs":{},"className":"Layer","children":[{"attrs":{"x":289,"y":100,"sides":6,"radius":70,"fill":"red","stroke":"black","strokeWidth":4},"className":"RegularPolygon"}]}]}';

// create node using json string
var stage = Kinetic.Node.create(json, 'container');

    Hope that answers the question.