FabricJS canvas is “stuck” after adding elements

Question

I\'m creating an application using fabric.js, and experiencing really strange behavior. I\'m adding both images and text instances, using the regular fabr

Answer 1

It's possible that canvas internal offset is not updated properly. Something on the page could change dimensions/position, making canvas positioned at a different location than the one it was during initialization. Try calling canvas.calcOffset() after renderAll() call, or after adding those objects.

The reason calcOffset is not called in renderAll is for performance reasons. renderAll is a redraw of an entire canvas. It happens every time something changes on canvas and canvas needs to be redrawn. As you can imagine, it gets called quite often (sometimes dozens of times per second), and it would be pretty wasteful to calculate new offset every time redraw happens.

Consider also that in most cases canvas position does not change throughout page life. It probably happens pretty rarely. Mainly during page load.

In highly-dynamic environment — where canvas changes position often — you can solve offset "problem" by explicitly calling calcOffset().

Answer 2

I had the same problem, in adition to kangax solution, in a VERY extreme environment, you can force it to recalculate the offset anytime the render occurs, with an event.

canvas.on('after:render', function(){ this.calcOffset(); });