fabricJs performance

fabricJs pan/zoom/click performance with large number of objects

by Hooman Askari

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.9/fabric.js"></script>
<p>Canvas</p>
<div id="canvasarea"><canvas id="c1" style="width: 100%"></canvas></div>

JavaScript

/**
 * Created by ritin on 27/3/17.
 */
+(function() {
    var numofRows = 200,
        numofCols = 100;

    fabric.Object.prototype.objectCaching = false;
    fabric.Object.prototype.statefullCache = false;
    fabric.Object.prototype.noScaleCache = true;
    fabric.Object.prototype.needsItsOwnCache = false;


    var canvas = new fabric.Canvas('c1', {
        renderOnAddRemove: false,
        preserveObjectStacking: true,
        targetFindTolerance: 4,
        perPixelTargetFind: true,
        skipOffscreen: true,
        selection: false, // disable group selection
        stateful: false, // Boolean, Indicates whether objects' state should be saved
        skipTargetFind: false // find target on Hover

    });
    canvas.setDimensions(
        {width: 800, height: 600});

    canvas.renderOnAddRemove = false;
    canvas.on('mouse:down', function (options) {
        if (options.target) {
            console.log('an object was clicked! ', options.target);
        }
    });


    var radius = 10;
    for (var i = numofCols; i >= 0; i--) {
        for (var j = numofRows; j >= 0; j--) {
            var acircle = new fabric.Circle({
                radius: radius,
                fill: 'black',
                left: i + 3 + j * radius * 2,
                top: i * radius * 2 + 3,
                lockMovementX: true,
                lockMovementY: true,
                lockRotation: true,
                lockScalingX: true,
                lockScalingY: true,
                lockUniScaling: true,
                lockSkewingX: true,
                lockSkewingY: true,
                selectionColor: 'red'
            });

            acircle.hasControls = acircle.hasBorders = false;
// console.log(acircle);
            canvas.add(acircle);

        }
    }
    canvas.renderAll();
    // canvas.relativePan(new fabric.Point(-100, -1300)); // absolutePan, relativePan
    // canvas.setZoom(0.13);
    console.log('Zoom :' + canvas.getZoom());
    applyZoom();

   ...