Load HTML5 Canvas Stage from JSON Tutorial
To load a complex stage that originally contained images and event bindings using Konva,
we need to create a stage node using Konva.Node.create()
, and then set the
images and event handlers with the help of selectors using the find()
method.
Images and event handlers must be manually set because they aren't serializable.
That methods works for small apps. For more complex cases take a look into Best Practices
- Vanilla
- React
- Vue
Note: Using Konva.Node.create()
directly in React is an anti-pattern. In React applications, we should manage state separately from the view. Instead of deserializing entire node structures, we should load the data that defines our shapes and let React components handle the rendering. The example below demonstrates how to load shape data as state in React:
Note: Using Konva.Node.create()
directly in Vue is an anti-pattern. In Vue applications, we should manage state with reactive data separately from the view. Instead of deserializing entire node structures, we should load the data that defines our shapes and let Vue components handle the rendering. The example below demonstrates how to load shape data as reactive state in Vue: