Responsive canvas size and iText rendering with fabricJS

Question

I am using fabricjs in my responsive webpage. I am trying to add some text to the canvas. So far this works ok.

Because the webpage is responsive, the canvas container changes in size according to the viewport. I would like that the canvas always takes 90% of the container element. Therefore I am scaling the canvas and all elements inside it so that they keep the same relative positions but take the 90% of the container. ( -> Is there any better way to do this?)

Everything works ok, except for the text rendering when the canvas loads for the first time. The text elements seem to be streetched. Other elements (Rect, Graphic) are added ok.

This is how it should look like. And when I click on the canvas or enable developers tools of a browser, the iText elements get rendered to the correct size.

I have tried using object.setCoords() on iText object and also canvas.calcOffset() which is suggested in many posts that I've come accross, but unfortunately with no success.

And by iText element I also have a problem with the cursor position - when I click on the element and try to edit it's content, the coursor is not displayed in between the characters (where would normaly be) but on the caracters.

Did somebody else come across this problem? What are your techniques in using fabricjs in responsive design, when the size of a canvas container changes?

Answer 1

To solve the problem with the cursor position, we disable cache for iText object.

When set to false, this disables (character width) caching for iText object.