setBackgroundImage examples

Used in documentation (jsdoc tag)

HTML

<script src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c" width="600" height="600"></canvas>
<button id="toggle-opacity">Toggle opacity</button>
<button id="toggle-stretch">Toggle stretch</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.setBackgroundImage('http://fabricjs.com/assets/jail_cell_bars.png', canvas.renderAll.bind(canvas), {
    backgroundImageOpacity: 0.5,
    backgroundImageStretch: false
});

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

    canvas.backgroundImageOpacity = canvas.backgroundImageOpacity < 1 ? 1 : fabric.util.toFixed(Math.random(), 2);
    canvas.renderAll();
});

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

    canvas.backgroundImageStretch = !canvas.backgroundImageStretch;
    canvas.renderAll();
});