setOverlayImage examples

Used in documentation (jsdoc tag)

HTML

<script src="https://rawgithub.com/kangax/fabric.js/master/dist/all.js"></script>
<canvas id="c" width="600" height="600"></canvas>
<button id="toggle-left">Toggle left</button>
<button id="toggle-top">Toggle top</button>

CSS

canvas {
    border: 1px solid #999;
}
button {
    margin-top: 20px;
}

JavaScript

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

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


canvas.setOverlayImage('http://pex7ss6vd.bkt.clouddn.com/喜洋洋2/35157a2295c788fbd91d0abcfa25d3ea1c1c9185', canvas.renderAll.bind(canvas), {
    overlayImageLeft: 100,
    overlayImageTop: 100
});

fabric.util.addListener(document.getElementById('toggle-left'), 'click', function () {
    if (!canvas.overlayImage) return;

    canvas.overlayImageLeft = !canvas.overlayImageLeft ? 100 : 0;
    canvas.renderAll();
});

fabric.util.addListener(document.getElementById('toggle-top'), 'click', function () {
    if (!canvas.overlayImage) return;

    canvas.overlayImageTop = !canvas.overlayImageTop ? 100 : 0;
    canvas.renderAll();
});