CODEWITHSUNDEEP
javascriptcanvaskineticjs
Buddy Lindsey
Buddy Lindsey

Reputation: 3630

Kinetic.js Can't Load image onto canvas

I have to be missing something simple. I have gone fairly line-by-line, but it just doesn't seem to work. I can't get the image to load.

var imageToCanvas = function(){
  var stage = new Kinetic.Stage("imgarea", 250, 256);

  var layer = new Kinetic.Layer();

  var imageobj = new Image();
  imageobj.onload = function(){
    var img = new Kinetic.Image({
      x: 10,
      y: 10,
      image: imageobj,
    });
    layer.add(img);
    stage.add(layer);
  };
  imageobj.src = "/static/img/unit-test-image.png";
  console.log(imageobj);
};

$(document).ready( function(){
  imageToCanvas();
});

    <canvas id="imgarea" width="250px" height="256px"></canvas>

the same code seems to work in another canvas app that I used Kinetc.js with. I just can't seem to figure out why this one isn't working.

The code also looks fairly similar to the tutorial as well: http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-image-tutorial/

Upvotes: 1

Views: 1812

Answers (1)

Jeremy Moore
Jeremy Moore

Reputation: 9

It looks like you're not defining the stage properly.. When I tried your code above I got an error about the container not being defined.. Try this instead..

var stage = new Kinetic.Stage({
  container: "imgarea",
  width: 250,
  height: 256
});

Upvotes: 1

Related Questions