Canvas basic layers demo powerded by kinetic.js

kinetic_layers_demo.html

<h1>Canvas basic layers demo</h1>
<p>powerded by kinetic.js</p>

<a href="http://jsfiddle.net/splosch/sezph315/1/">Working Demo (JSFiddle)</a>
  
<script src="https://cdnjs.cloudflare.com/ajax/libs/kineticjs/5.2.0/kinetic.min.js"></script>

<div id="container"></div>

kinetic_layers_demo.js

(function (Kinetic) {
  "use strict";

  var sources = "http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg";

  function loadImage(source, callback) {
    var image = new Image();

    image.onload = function() {
      callback(image);
    };

    image.src = source;
  }

  function drawImageOnContainer(image) {
    var stage,
        layer = new Kinetic.Layer();
    
    stage = new Kinetic.Stage({
      container: "container",
      width: 578,
      height: 200
    });

    var darthVaderImg = new Kinetic.Image({
      image: image,
      offset: {x: 200 / 2, y: 137 / 2},
      width: 200,
      height: 137
    });

    darthVaderImg.position({x:200, y:100});
    layer.add(darthVaderImg);
    stage.add(layer);
  }

  // draw the darn vaderinho
  loadImage(sources, drawImageOnContainer);

})(Kinetic);

kinetic_layers_demo.md

Canvas basic layers demo

• powerded by kinetic.js
• Kinetic.js is a Canvas-API
• it's not longer maintained but as stated on the project site "pretty darn solid" :)

this code is a simpler and little cleaner version of Kinetic Images expand on hover demo: http://www.html5canvastutorials.com/labs/html5-canvas-expand-image-on-hover/

Demo here:

http://jsfiddle.net/splosch/sezph315/1/

• this is a simpler version of Kinetic Images expand on hover demo: http://www.html5canvastutorials.com/labs/html5-canvas-expand-image-on-hover/