Search code examples
javascriptjquerykineticjs

Image does not render with KineticJS

I am simply trying to render an image with Kinetic, but nothing appears, nor do i get an error.

The fiddle can be found here.

Source code:

$( function() {
    var stage = new Kinetic.Stage({
      container: 'container',
      width: 400,
      height: 800
    });
    var layer = new Kinetic.Layer();

    var yoda = new Kinetic.Image({
      x: 0,
      y: 0,
      width: 200,
      height: 400
    });

    var imageObj = new Image();
    imageObj.src = 'http://farm6.staticflickr.com/5448/9408019718_88934b087e_b.jpg';

    imageObj.onload = function() {
        yoda.setImage(imageObj);
        layer.draw();
    };

    layer.add(yoda);
    stage.add(layer);

});
Solution

  • You must use <div> container for KineticJS Stage:

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

    http://jsfiddle.net/ro1zpkaL/1/