Tutorials
Basics
Advanced
KineticJS
Three.js
Core Shapes
Rect
Circle
Wedge
Line
Polygon
Image
Sprite
Text
Spline
Blob
Custom
Plugins
Label
RegularPolygon
Star
Path
TextPath
Styling
Fill
Stroke
Opacity
Shadow
Line Join
Hide and Show
Events
Binding Events
Image Events
Mobile Events
Multi-Event
Desktop & Mobile
Remove Event
Remove by Name
Custom Hit Region
Listen for Events
Cancel Propagation
Event Delegation
Fire Events
Drag and Drop
Drag and Drop
Drag an Image
Drag a Group
Drag a Line
Drag the Stage
Drag Events
Simple Drag Bounds
Complex Drag Bounds
Groups and Layers
Groups
Layering
Change Containers
Clipping Regions
Tweens
Linear Easing
Common Easings
All Easings
Finish Event
All Controls
Tween Filter
Animations
Creating an Animation
Moving
Rotating
Scaling
Stop Animation
Selectors
Select by Id
Select by Name
Select by Type
Data & Serialization
Data URL
Serialize Stage
Simple Load
Complex Load
Performance
Shape Caching

HTML5 Canvas Save Stage as JSON String with KineticJS

To save the stage as a JSON string with KineticJS, we can use the toJSON() method which serializes the KineticJS Node tree into text which can be saved in web storage or in an offline database. We can also serialize other nodes, including layers, groups, and shapes.

Open in new window

Code Editor

< Data URL Simple Load >

More Examples

HTML5 Canvas Load Complex Stage with KineticJS
HTML5 Canvas Load Stage with JSON String with KineticJS

Modified on April 9th, 2013 by Eric Rowell