CODEWITHSUNDEEP
fabricjs
Pedro Jose
Pedro Jose

Reputation: 442

Improve performance big canvas [Edited]

I have a large canvas (2000x2000), and many rect objects (738)

With this canvas, I have problems to be able to move objects, the application is blocked easily and it is not flowing

I have tried to reduce the size of the canvas to 400x400 and the speed has improved a lot, and it does not use as much memory.

What is the reason for this? Can I improve with the new objectCaching property of fabricJS?

I leave an example fiddle

var canvas = new fabric.Canvas('canvas');
canvas.setDimensions({width:2000, height: 2000});

I can not leave the complete code of the example, because it is too big. It is a JSON with the structure of my objects

Edit We have seen that the culprit is related to the memory available to the user of the canvas, and the browser used.

We believe that little can be done in these aspects.

Upvotes: 1

Views: 1286

Answers (2)

Pedro Jose
Pedro Jose

Reputation: 442

Thanks Andrea, I have made the changes you suggested, and I see that performance has improved a lot. I see that having a very large group hidden, moving the viewport, the performance improves a lot, instead of having an excessively large canvas.

Upvotes: 0

AndreaBogazzi
AndreaBogazzi

Reputation: 14731

So 2000x2000 is a large canvas, and you should not use it is for panning logic.

Keep the canvas as big as you display it and then just use panning to move around. This is a first step. (check this tutorial for panning http://fabricjs.com/fabric-intro-part-5#pan_zoom)

Having the canvas smaller will detect objects that are not visible and skip their rendering, this will save rendering time.

Another thing could be group similar objects togheter, so that fabric can optimize rendering of grouped rects, if you have 738 objects, you need to find specific optimization for your application use case.

Upvotes: 2

Related Questions