setBackgroundImage examples

Used in documentation (jsdoc tag)

by joepenzo

HTML

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

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,
    objectCaching: false
});

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

var rect = new fabric.Rect({
       left: 50,
       top: 50,
       width: 150,
       height: 150,
       fill: 'transparent',
       stroke: 'rgba(34,177,76,1)',
       strokeWidth: 5
    });
  
  
fabric.util.loadImage('https://images.unsplash.com/photo-1497366811353-6870744d04b2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80', function (img) {
    rect.set('fill',{
        source: img,
        repeat: 'repeat'
    });
    //rect.set({fill:'#FF0000'});
    canvas.renderAll();
});    

canvas.setBackgroundImage(rect, canvas.renderAll.bind(canvas));
canvas.setBackgroundColor('#FF0000');