CODEWITHSUNDEEP
javascriptcanvaskineticjs
elonmir
elonmir

Reputation: 27

Performance Issues KineticJS

I'm quite new to canvas so I need some input.

I wan't to create a library overview with its stocks and so I have to handle about 2k+ rectangles. The problem is, the performance on drag and on scale is not very good, the fps drop below 10. Thats plain ugly, so I would appreciate some input what to do better or in other ways toe improve the performance of my (basic) script.

http://jsfiddle.net/kHGvh/13/embedded/result/
http://jsfiddle.net/kHGvh/13/

Upvotes: 2

Views: 2500

Answers (2)

kangax
kangax

Reputation: 39168

I just tried the same thing using Fabric.js, out of curiosity.

I do see noticeably better performance — http://jsfiddle.net/M7n4p/

Note that I'm using experimental "group_rewrite" branch — https://github.com/kangax/fabric.js/branches

FWIW, here's the code used to create it (just to give you comparison with Kinetic.js).

Markup:

<canvas id="c" width="1200" height="600" style="border:1px solid #ccc"></canvas>

JS:

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

var rects = [ ];
for (var i = 1; i <= 47; i++) {
  for (var j = 1; j <= 42; j++) {
    var rect = new fabric.Rect({
      left: i*28,
      top: j*18,
      width: 20,
      height: 10,
      fill: 'green'
    });
    rects.push(rect);
  }
}

canvas.add(new fabric.Group(rects));

Upvotes: 2

Joseph
Joseph

Reputation: 119847

I'm having the same issues as well when creating a draggable grid. However, I think there is little one can do about it.

You could think about lessening the number of cells you have. 2k+ rectangles is at least 2k+ objects that track the shape on the canvas. with the drag event happening at least 10 frames per second, you have 20k+ calculations and object accesses per second! The shear number of shapes it causing problems.

Upvotes: 0

Related Questions