fabric.js setOverlayImage callback

by a7mad24

HTML

<script src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c" width="500" height="500"></canvas>

CSS

canvas {
    border: 1px solid #999;
}
img {
    display: none;
}

JavaScript

/**
 * fabric.js template for bug reports
 *
 * Please update the name of the jsfiddle (see Fiddle Options).
 * This templates uses latest dev verison of fabric.js (https://rawgit.com/kangax/fabric.js/master/dist/fabric.js).
 */

// initialize fabric canvas and assign to global windows object for debug
var canvas = window._canvas = new fabric.Canvas('c'),
    $loggingEl = $('#logging');

canvas.selection = true;

// Do some initializing stuff
fabric.Object.prototype.set({
    transparentCorners: false,
    cornerColor: 'rgba(102,153,255,0.5)',
    cornerSize: 12,
    padding: 5
});

// ADD YOUR CODE HERE
canvas.isDrawingMode = true;
canvas.freeDrawingBrush = new fabric['PencilBrush'](canvas);
canvas.freeDrawingBrush.color = 'Black';
canvas.freeDrawingBrush.width = 4;
fabric.Image.fromURL('http://fabricjs.com/assets/pug.jpg', function(img) {
canvas.insertAt(img.set({ left: 400, top: 0, angle: 90, lockMovementX:true, lockMovementY: true,lockScaling: true, LockRotation:
true,selectable: false,isDrawingMode: true}).scale(0.25));
});