setBackgroundImage examples

Used in documentation (jsdoc tag)

HTML

<script src="https://k7moorthi.in/works/test/fabric.js"></script>
<canvas id="c" width="320" height="400"></canvas>

CSS

canvas {
    border: 1px solid #999;
}

JavaScript

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


canvas.setBackgroundImage('http://test', canvas.renderAll.bind(canvas), {
    backgroundImageOpacity: 0.5,
    backgroundImageStretch: false
});

canvas.setOverlayImage('http://test', canvas.renderAll.bind(canvas), {
    overlayImageOpacity: 0.5,
    overlayImageStretch: true
});

//canvas.setBackgroundColor('#00F', canvas.renderAll.bind(canvas));

//canvas.setOverlayColor('#00F', canvas.renderAll.bind(canvas));

canvas.clipTo = function(ctx) {
    ctx.rect(100,100,100,100);
}
var rect = new fabric.Rect({
  width: 200,
  height: 200,
  left: 50,
  top: 50,
  fill: 'rgb(255,0,0)'
});

canvas.add(rect);

rect.bringToFront();

canvas.renderAll();

//http://fabricjs.com/assets/pug.jpg