How to add image to fabric canvas?

Question

I want to add images/icons to my fabric canvas. The code given on the Fabric demo is not working.

fabric.Image.fromURL('my_image.png', function(oImg) {
canvas.add(oImg);
});

This just makes my entire canvas blank. I want to add icons as clickable elements which respond to events.

Answer 1

I have done a jsfiddle that loads a jpg image on the canvas, by using the fabric.Image.fromURL() function and the 'mouse:down' event. Inside the mouse:down i check if the user clicks on an object or just on the canvas.

here is a snippet of the javascript:

var canvas = new fabric.Canvas('c');
canvas.backgroundColor = 'yellow';

fabric.Image.fromURL('http://fabricjs.com/assets/pug_small.jpg', function(myImg) {
 //i create an extra var for to change some image properties
 var img1 = myImg.set({ left: 0, top: 0 ,width:150,height:150});
 canvas.add(img1); 
});

canvas.on('mouse:down',function(event){
  if(canvas.getActiveObject()){
    alert(event.target);
  }

})

but my example also works ok ,if i dont use the extra variable:

fabric.Image.fromURL('http://fabricjs.com/assets/pug_small.jpg', function(myImg) {
 canvas.add(myImg); 
});

if you need more fabric events you can take a look here : http://fabricjs.com/events/

jsfiddle : https://jsfiddle.net/tornado1979/5nrmwtxu/

Hope helps , good luck.