html5-canvasfabricjsfabricjs2

How to optimize display & interactive with large svg image without Lag in FabricJS


I have a fabricJS editor with some large svg files, therefore, when I interactive with ( move / drag ) items on the editor I fill it very lag & heavy.
How to optimize using large svg files with fabricJS ?

Here is my code:

var canvas;

var canvasObject = document.getElementById("editorCanvas");

// set canvas equal size with div
$(canvasObject).width($("#canvasContainer").width());
$(canvasObject).height($("#canvasContainer").height());

canvas = new fabric.Canvas('editorCanvas', {
  backgroundColor: 'white',
  selectionLineWidth: 2,
  width: $("#canvasContainer").width(),
  height: $("#canvasContainer").height()
});

for (var i = 0; i < 4; i++) {

  var bigImage = new fabric.Image();
  bigImage.left = 10 * (i + 1);
  bigImage.top = 10 * (i + 1);
  bigImage["objectCaching"] = true;
  canvas.add(bigImage);
  bigImage.setSrc('https://futushigame.firebaseapp.com/big_image/big_image_' + (i + 1) + '.svg', function(imageObject) {
    imageObject.set('dirty', true);
    canvas.renderAll();
    setObjectCoords();
  });

}

function setObjectCoords() {
  canvas.forEachObject(function(object) {
    object.setCoords();
  });
}
#canvasContainer {
  width: 100%;
  height: 100vh;
  background-color: gray;
}
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.js"></script>

<div id="canvasContainer">
  <canvas id="editorCanvas"></canvas>
</div>


Drag items are filling heavy & lag


Solution

  • You can rewrite needsItsOwnCache from fabric.Image class.

    var canvasObject = document.getElementById("editorCanvas");
    
    // set canvas equal size with div
    $(canvasObject).width($("#canvasContainer").width());
    $(canvasObject).height($("#canvasContainer").height());
    
    canvas = new fabric.Canvas('editorCanvas', {
      backgroundColor: 'white',
      selectionLineWidth: 2,
      width: $("#canvasContainer").width(),
      height: $("#canvasContainer").height()
    });
    
    for (var i = 0; i < 4; i++) {
    
      var bigImage = new fabric.Image();
      bigImage.left = 10 * (i + 1);
      bigImage.top = 10 * (i + 1);
      //    bigImage["objectCaching"] = true;
      bigImage["ownCaching"] = true;
      //  bigImage["clipPath"] = [];
      canvas.add(bigImage);
      bigImage.setSrc('https://futushigame.firebaseapp.com/big_image/big_image_' + (i + 1) + '.svg', function(imageObject) {
        //imageObject.set('dirty', true);
        canvas.renderAll();
        setObjectCoords();
      });
    
    }
    
    function setObjectCoords() {
      canvas.forEachObject(function(object) {
        object.setCoords();
      });
    }
    
    fabric.Image.prototype.needsItsOwnCache = function() {
      return true
    }
    #canvasContainer {
      width: 100%;
      height: 100vh;
      background-color: gray;
    }
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.js"></script>
    
    <div id="canvasContainer">
      <canvas id="editorCanvas"></canvas>
    </div>