Resize Filter Bug

by Steve Eberhardt

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.4/fabric.min.js"></script>
<button id="to-json">To JSON
</button>
<button id="load-json">Load JSON
</button>
<canvas id="c" width="400" height="400" class="c"></canvas>
<canvas id="buffer" width="400" height="400" class="c"></canvas>

CSS

canvas {
  border: 1px solid grey;
}

JavaScript

var canvas = new fabric.Canvas('c');
var bCanvas = new fabric.StaticCanvas('buffer');
var json;

var imageSrc = "http://fabricjs.com/assets/pug_small.jpg";

fabric.Image.fromURL(imageSrc, function(img) {
  img.set({
    left: 10,
    scaleX: 0.70,
    scaleY: 0.70,
    top: 10,
  }, {
    crossOrigin: 'anonymous'
  });

  img.resizeFilter = new fabric.Image.filters.Resize({
    resizeType: 'lanczos'
  });
  img.applyResizeFilters();

  canvas.add(img);
});

$("#to-json").on('click', function() {
	json = JSON.stringify(canvas);
});

$("#load-json").on('click', function() {
	//canvas.clear();
  //console.log(json);
  bCanvas.loadFromJSON(JSON.stringify(canvas), function() {
      bCanvas.renderAll();
  });     
});