fabrics objectCaching

by SooChangLee

HTML

<script src="https://s3.ap-northeast-2.amazonaws.com/js-fiddle/fabric.min.js"></script>
<b>Canvas 1</b> - img.objectCaching = true<br>
(X)Image appears blurred.<br>
(O)Image select, drag control fine.<br>
<canvas id="canvas1" width="600" height="700"></canvas><br>

CSS

canvas {
    border: 1px solid #ccc;
}

JavaScript

var imgURL = 'https://s3.ap-northeast-2.amazonaws.com/js-fiddle/ex_05.jpg';

fabric.perfLimitSizeTotal = 16777216; // allows for up to 4096x4096 cache

var canvas1;
var clipPath_1_1, clipPath_1_2, clipPath_1_3;


$(document).ready(function(){
  canvas1 = new fabric.Canvas('canvas1', {
    width: 600,
    height: 700,
    perPixelTargetFind:   true
  });
  
	make_layout();
  
  insert_image();
});

function make_layout(){
  //-----------------------
  //Canvas1 - make clipPath 
  clipPath_1_1 = new fabric.Rect({
    left: 50,
    top: 50,
    width: 500,
    height: 200,
    selectable: false,
    absolutePositioned: true
  });

 
  canvas1.add(clipPath_1_1);

}

function insert_image(){
  //--------------------
  //Canvas1 - load image 
  fabric.Image.fromURL(imgURL, function(img) {
    img.set({
      left: -1000,
      top: -1000,
      scaleX: 1,
      scaleY: 1,
      /* objectCaching: false, */
			clipPath: clipPath_1_1   
    });

    canvas1.add(img);
    
    canvas1.renderAll();
  }, { crossOrigin: 'Anonymous' });
  
  fabric.Image.fromURL(imgURL, function(img) {
    img.set({
      left: 50,
      top: 300,
      cropX: 1050,
      cropY: 1050,
      width: 500,
      height: 200,
      scaleX: 1,
      scaleY: 1,
      /* objectCaching: false, */
    });

    canvas1.add(img);
    
    canvas1.renderAll();
  }, { crossOrigin: 'Anonymous' });
   
}