Fabric.js: Itext text looks blurry

[shaangidwani]

Version

2.3.3

Test Case

https://jsfiddle.net/shaangidwani/91y5jb83/5/

Steps to reproduce

1. Add itext with object caching false or true

Expected Behavior

Text must be very clear like mspaint or winword.

Actual Behavior

Text looks blurry

[asturur]

Is blurry because is set on half pixels.
Please try to add text on half pixels on winword or mspaint and you will get a simila bluriness

[shaangidwani]

but whats the solution. if i set device pixel one still looks blurry. Please help if you can.

[asturur]

can you show me a non blurry text as small as that, and how you create it?
From any applicatio

[shaangidwani]

I have attached ms-paint screenshots where font-size is 11 but its looks very clear

[asturur]

@shaangidwani i do not have the font face calibri to replicate the same, can you paste and example with Arial and also give the position of it?

[shaangidwani]

@asturur sure. I have set the "Arial" font and try to draw a text in microsoft paint. its gives crystal clear fonts. attached screenshot for the same.
Also attached fonts "Times of new roman"

Not sure about position how to get it from ms-paint. Kindly suggest on this.

[asturur]

canvas 11px

your screen

canvas 15px

[asturur]

Your 11px text is definitely using many pixels compared to canvas one. Aren't you using some sort of high dpi screen?

Can you compare the output of this fiddle at 11px an 15px with your screen?

[shaangidwani]

no. in same screen i fell blurry text in canvas. but in ms-paint its looks very clear.

Let me give the another example of canvas. "w-paint" which is simple canvas paint web application. In that fonts clarity is excellent. I have attached screenshot for the same and also mention live demo URL. in that just draw the text and try to write in that it will gives crystal clear fonts (Use black color).
http://wpaint.websanova.com/

[shaangidwani]

Attached comparision of all the verson. wpaint , fabricjs , ms-paint.

[shaangidwani]

Please let me know if any thing further required. Pls pls pls help me to fix this.

[asturur]

on what windows are you? if win 10 can you check you are not using dpi scaling of 125% in display settings?

If you look at your screenshot the 14px font is bigger than then 15px on canvas, something is off.

[shaangidwani]

I am on windows 10 . I have attached my display setting. dip scaling 100%. I have check on diffrent machines. i.e. windows 10, windows 7 canvas fonts looks blurry with fabricjs itext and textbox.

[asturur]

your non canvas font is still way bigger than the canvas one, that is why
is more clear.

On Mon, 16 Jul 2018, 03:00 shaangidwani, [e-mail] wrote:

I am on windows 10 . I have attached my display setting. dip scaling 100%.
I have check on diffrent machines. i.e. windows 10, windows 7 canvas fonts
looks blurry with fabricjs itext and textbox.

[image: image]
https://user-images.githubusercontent.com/26000152/42746103-def66996-88f3-11e8-9391-6c1659c41962.png

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/fabricjs/fabric.js/issues/5086#issuecomment-405162758,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABI4QLj4BMP_lQWTbCiHLphSTCN0Cozqks5uHDoCgaJpZM4VDSB9
.

[shaangidwani]

but if you can check other application canvas fonts like http://wpaint.websanova.com/ its looks very clear on canvas with same fonts.
You can also check another github project "http://literallycanvas.com/index.html" its also very clear fonts on the canvas with any windows system.

[asturur]

Litterally on canvas is TOP
Fabric is CENTER
The other is left on BOTTOM

Those are the apps compared with arial 12px there is basically no difference.
Your native apps are using more pixels than needed and you are seeing a better text, but the fabricJS is as clear as a 12px arial text on canvas can be

[shaangidwani]

Is there any solution for display text what native apps are doing for display better text ? Means how to set more pixcel in Itext or Textbox in fabricJS. i really appreciate your help.

[asturur]

increase fonts size. Increase the scale.