Blurred background image

by Eugene Vilder

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.2.3/fabric.js"></script>
<table style="width: 100%">
<tr>
  <td>
    <h1>CANVAS Rendering (blurred)</h1>
<canvas id="paper" width="400" height="400" style="border:1px solid #ccc"></canvas>

  </td>
  <td>
    <h1>IMG Rendering (normal)</h1>
<img id='image'...

SCSS

table {
  width: 100%;
  td {
    padding: 0;
    vertical-align: top;
    h1 {
      font-size: 20px
    }
  }
}

JavaScript

var canvas = this.__canvas = new fabric.Canvas('paper');
  fabric.Object.prototype.transparentCorners = false;

  var padding = 30;
	const url = $('#image').attr('src');
  
  fabric.Image.fromURL(url, function(img) {

//    img.scaleToWidth(100);
    var patternSourceCanvas = new fabric.StaticCanvas();
    patternSourceCanvas.add(img);
    patternSourceCanvas.renderAll();
    var pattern = new fabric.Pattern({
      source: function() {
        patternSourceCanvas.setDimensions({
          width: img.getScaledWidth() + padding,
          height: img.getScaledHeight() + padding
        });
        patternSourceCanvas.renderAll();
        return patternSourceCanvas.getElement();
      },
      repeat: 'no-repeat'
    });

    canvas.add(new fabric.Rect({
        left: 0,
        top: 0,
        width: 200, 
        height: 200,
        angle: 0,
        fill: pattern,
        statefullCache: true
//        objectCaching: false
      }));
      
      canvas.renderAll();

  });
  
  canvas.renderAll();