Fabricjs filter images

by maxim_torba

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.1.0/fabric.min.js"></script>
<canvas id="c" width="600" height="600"></canvas>

CSS

canvas {
    border: 1px solid #999;
}

JavaScript

var canvas = new fabric.Canvas('c');

// Use these bools to toggle different results
fabric.enableGLFiltering = true
const withResizeFilter = true

fabric.Image.fromURL('http://i.imgur.com/3tU4Vig.jpg', function(oImg) {
  canvas.add(oImg);

  oImg.setOptions({
    scaleX: .25,
    scaleY: .25
  })

  if (withResizeFilter) {
    oImg.filters.push(new fabric.Image.filters.Resize({
      scaleX: oImg.scaleX,
      scaleY: oImg.scaleY,
      
    }));
  }

  oImg.filters.push(new fabric.Image.filters.Pixelate({
    blocksize: 8
  }));

  // Issue starts at 2nd additional filter
  oImg.filters.push(new fabric.Image.filters.Sepia());

  oImg.filters.push(new fabric.Image.filters.Polaroid());

  // Single render yields incorrect results when GPU mode
  oImg.applyFilters();
  canvas.renderAll();

  // Do another render when running in CPU mode to see incorrect results
  if (!fabric.enableGLFiltering) {
    setTimeout(function() {
      oImg.applyFilters();
      canvas.renderAll();
    }, 500)
  }

}, {
  crossOrigin: '*'
});

// Original
fabric.Image.fromURL('http://i.imgur.com/3tU4Vig.jpg', function(oImg) {
  canvas.add(oImg);

  oImg.setOptions({
    scaleX: .25,
    scaleY: .25,
    left: 280,
    top: 300
  })

}, {
  crossOrigin: '*'
});