Fabric.js: IText font of a group alternates fuzzy or crisp when setting the group's location.

[wangxianzhe015]

Version

1.7.1

Test Case

https://jsfiddle.net/Miron/24ph9o5x/

Stackoverflow Question

http://stackoverflow.com/questions/42095045/fabric-js-itext-font-fuzzy-according-to-position

Expected Behavior

All fonts are expected to be as crisp as possible whether its group's location.

Actual Behavior

When calling group's set() function to set left and top properties, font becomes crisp or fuzzy, not sure why.

[asturur]

can we make a fiddle demo with the same fonts without all the exagon or moving steps?
keep it minimal or i will never find time to watch it.

[wangxianzhe015]

I tried to do so, but it's the minimal, I think. Point is that the text becomes fuzzy or crisp, when the text is in group. Consider the left and top properties, if they are not met a condition, text becomes fuzzy, doesn't it?

[ncou]

Hi,

There is problem between Chrome and firefox.

On the left FF, on the right it's Chrome.

It's probably a subpixel issue, you are not using some round numbers for the top values ("Math.sqrt(3) * radius / 2").

I have add a round for the values, the result it's better, but in the jsfiddle i updated the library to v1.7.3 to totaly fix the problem (i think asturur fixed something like an antialising problem in this version cf changelog "Fix: add 2 extra pixels to cache canvases to avoid aliasing cut").

Here is a working fiddle. Close your ticket if it's ok, and post the answer on stackoverflow, i don't have an accound on this site.
https://jsfiddle.net/24ph9o5x/4/

[wangxianzhe015]

@ncou , thanks for your advice.
But it doesn't work even with version1.7.3.
I will try to fix the location as you said as just integer numbers. Actuallly, as you can see, origin properties are center, so the left or top might be infinite values.
Please explain me how the text is rendered in this library, that can help me with what the solution is.

I made a demo, check http://red-moristems.rhcloud.com/.
In this case, moving items doesn't matter.
On the bottom left, you will see a button. When you hover it, you can see several icons.
After you click "lock" icon, when you move items, the text of hexagon becomes fuzzy.
If you double click item, it will remove the original text and generate same text box with same left and top properties, but the text box is crisp.
So what could be the problem here?
Thanks.

[asturur]

i cannot test the fuzzyness on the macbook because of retina everything is crisp.

[asturur]

i m trying to help on SO since this is a particular app case and we have other 188 issues here to look at

[ncou]

Not really sure i can help because i can't reproduce it with my latest jsfiddle.
Perhaps try to disable the cache object with the code :

fabric.Object.prototype.set({
objectCaching: false
});

I will try on other browsers and set an answer on Stackoverflow if i made some progress.

[ncou]

I think disable the cache could help. I could reproduce something near your issue :

If i made a group throw selection, the text became crisppy.
If i disable caching on the IText object the text is always crispy (with or without selection).

[wangxianzhe015]

Thanks, @ncou
It solved the problem to disable cache object. Could you explain me how it can solve the problem?

[asturur]

did you check your stack overflow question? there is a full explanation there.