Blurred background image

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.2.3/fabric.min.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 = new fabric.Canvas('paper');


canvas.add(page);


fabric.Image.fromURL($('#image').attr('src'), function(img) {
console.log(img)
  const pattern = new fabric.Pattern({ source: img._element, 
    repeat: 'no-repeat'
  });

  page.set('fill', pattern);
  page.canvas.requestRenderAll();
  pase.to
}.bind(this),{crossOrigin: 'Anonymous'});