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 get() method.
Images and event handlers must be manually set because they aren’t serializable.

Konva Load Complex Stage Demoview raw
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.rawgit.com/konvajs/konva/1.6.5/konva.min.js"></script>
<meta charset="utf-8">
<title>Konva Load Complex Stage Demo</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #F0F0F0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
var json = '{"attrs":{"width":578,"height":200},"className":"Stage","children":[{"attrs":{},"className":"Layer","children":[{"attrs":{"width":"auto","height":"auto","text":"Text Shadow!","fontFamily":"Calibri","fontSize":95,"x":20,"y":20,"stroke":"red","strokeWidth":2,"shadowColor":"black","shadowBlur":2,"shadowOffsetX":10,"shadowOffsetY":10,"shadowOpacity":0.5},"className":"Text"},{"attrs":{"stroke":"green","strokeWidth":10,"lineJoin":"round","lineCap":"round","points":[{"x":50,"y":140},{"x":450,"y":160}],"shadowColor":"black","shadowBlur":10,"shadowOffsetX":5,"shadowOffsetY":5,"shadowOpacity":0.5},"className":"Line"},{"attrs":{"x":280,"y":100,"width":100,"height":50,"fill":"#00D2FF","stroke":"black","strokeWidth":4,"shadowColor":"black","shadowBlur":10,"shadowOffsetX":5,"shadowOffsetY":5,"shadowOpacity":0.5,"rotation":0.3490658503988659,"id":"blueRectangle"},"className":"Rect"},{"attrs":{"x":100,"y":41,"width":106,"height":118,"id":"yodaImage"},"className":"Image"}]}]}';
var stage = Konva.Node.create(json, 'container');
/*
* set functions
*/
stage.get('#blueRectangle').on('mouseover mouseout', function() {
var stroke = this.stroke();
this.stroke(stroke === 'black' ? 'red' : 'black');
stage.draw();
});
/*
* set images
*/
var imageObj = new Image();
imageObj.onload = function() {
stage.get('#yodaImage')[0].image(imageObj);
stage.draw();
};
imageObj.src = '/assets/yoda.jpg';
</script>
</body>
</html>