How to add an image to a canvas with Fabric.js

Basic example which illustrates how to create a fabric.Image object using an HTML Image element.

by shuhikari

HTML

<canvas id="canvas" width="640" height="480"></canvas>

CSS

#canvas {
    box-shadow: 0 0 5px 1px black;
}

TypeScript

var imgURL = 'http://i.imgur.com/8rmMZI3.jpg';
var frontImg = 'https://www.gravatar.com/avatar/7624303fd258152fae274062f2b2b65b?s=80'

var canvas = new fabric.Canvas('canvas');

var pugImg = new Image();
var shuImg = new Image();
pugImg.onload = function (img) {    
    var pug = new fabric.Image(pugImg, {
        angle: 45,
        width: 500,
        height: 500,
        left: 50,
        top: 70,
        scaleX: .25,
        scaleY: .25
    });
    canvas.setBackgroundImage(pug, canvas.renderAll.bind(canvas));
};
shuImg.onload = function (img) {
	var shu = new fabric.Image(shuImg, {
  	top: 0,
    left: 0
  })
  canvas.add(shu)
}
shu
pugImg.src = imgURL;