setBackgroundImage examples

Used in documentation (jsdoc tag)

HTML

<script src="https://cdn.rawgit.com/kangax/fabric.js/71b28012/dist/fabric.js"></script>
<button id="toggle-opacity">Toggle opacity</button>
<button id="toggle-stretch">Toggle stretch</button>
<canvas id="c" width="600" height="600"></canvas>

CSS

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

JavaScript

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

let opacity = 0.2;
let imgUrl = 'http://fabricjs.com/assets/jail_cell_bars.png';

fabric.Image.fromURL(imgUrl, imgObj => {

  canvas.setBackgroundImage(imgObj, canvas.renderAll.bind(canvas), {
      opacity: 1,
      strech: false
  });
  
  
  fabric.util.addListener(document.getElementById('toggle-opacity'), 'click', function () {
      if (!canvas.backgroundImage) return;

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

  fabric.util.addListener(document.getElementById('toggle-stretch'), 'click', function () {
      if (!canvas.backgroundImage) return;
      
     // debugger;
    
    	if(!canvas.backgroundImage.strech){
      		imgObj.scaleToWidth(canvas.width);
          imgObj.scaleToHeight(canvas.height);
          canvas.backgroundImage.strech = true;
      } else {
      		imgObj.scaleToWidth(imgObj.width);
          imgObj.scaleToHeight(imgObj.height);
       		canvas.backgroundImage.strech = false;
      }
    	
      canvas.renderAll();
  });




});