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>

<b>Canvas 2</b> - img.objectCaching = false<br>
(O)Image appears clearly.<br>
(X)When select one image, other image disappears...<br>
<canvas id="canvas2" width="600" height="700"></canvas>

CSS

canvas {
    border: 1px solid #ccc;
}

JavaScript

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


var canvas1;
var clipPath_1_1, clipPath_1_2, clipPath_1_3;

var canvas2;
var clipPath_2_1, clipPath_2_2, clipPath_2_3;

$(document).ready(function(){
  canvas1 = new fabric.Canvas('canvas1', {
    width: 600,
    height: 700,
    perPixelTargetFind:   true
  });
  
  canvas2 = new fabric.Canvas('canvas2', {
    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
  });
  clipPath_1_2 = new fabric.Rect({
    left: 50,
    top: 250,
    width: 500,
    height: 200,
    selectable: false,
    absolutePositioned: true
  });
  clipPath_1_3 = new fabric.Rect({
    left: 50,
    top: 450,
    width: 500,
    height: 200,
    selectable: false,
    absolutePositioned: true
  });
 
  canvas1.add(clipPath_1_1);
  canvas1.add(clipPath_1_2); 
  canvas1.add(clipPath_1_3);   

  //-----------------------
  //Canvas2 - make clipPath 
  clipPath_2_1 = new fabric.Rect({
    left: 50,
    top: 50,
    width: 500,
    height: 200,
    selectable: false,
    absolutePositioned: true
  });
  clipPath_2_2 = new fabric.Rect({
    left: 50,
    top: 250,
    width: 500,
    height: 200,
    selectable: false,
    absolutePositioned: true
  });
  clipPath_2_3 = new fabric.Rect({
    left: 50,
    top: 450,
    width: 500,
    height: 200,
    selectable: false,
    absolutePositioned: true
  });
 
  canvas2.add(clipPath_2_1);
  canvas2.add(clipPath_2_2); 
  canvas2.add(clipPath_2_3);  
}

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