Fabric.js: Blurry Canvas (image&text) when setDimensions is called

[philippemiguet]

Hi all :)

Fabric Version: 1.6.0-rc.1
Fiddle: https://jsfiddle.net/philippemiguet/Lay5t3et
(Hit button and watch the images blur)

What I did:

• Create canvas 484x484
• Add image
• set dimensions 484x484 via setDimensions (any dimensions do the same)

What I expected:

• Image to look at the original with the same quality

What happened:

• Image was seen to be blurred after setDimensions is called

Investigation:
When setDimensions is called on canvas, the image becomes blurry. Using canvas.imageSmoothingEnabled = false doesn't solve the problem the image still gets blurry.

However, when the dimensions are set during the initialization the image looks as the original. Here is a fiddle.

I think it is related to the issue #2459 that was fixed here #2337.

EDIT: Not only the image get's blurry but the whole canvas. If you add some text it also gets blurry. I have updated the jsfiddle with some text to show you.

[ozooner]

I also ran into similar issue. For me the use-case was to initialize canvas based on user's screen size. Since I needed to do it only once, I could use DOM element properties instead:

var element = document.createElement('canvas');
element.id = 'cnv';
element.height = window.innerHeight / 2;
element.width = window.innerWidth / 2;
document.body.appendChild(element);
canvas = new fabric.Canvas('cnv');

However some library methods still call setDimensions, e.g toDataURL with a multiplier parameter

[philippemiguet]

Indeed @ozooner good finding, it means generated image will be blurred. Does someone have a hunch what is the issue here?

[asturur]

Guys i cannot seen anny blurriness.
Can we check with some image that make the effect more evidente? form the 4 canvases looks same in couples ( the one with imageSmoothing enabled / not enabled )

[philippemiguet]

Hey @asturur you really don't see the text and image getting blurred when clicking on the button? http://cl.ly/253X3H2n1m3a

[ozooner]

@asturur

I actually didn't see the difference in @philippemiguet examples either, but it becomes more apparent when large image is scaled down: https://jsfiddle.net/3m66myvb/2/

[philippemiguet]

@asturur @ozooner Sorry guys, maybe I did a bad job as explaining with the fiddle :)

I actually call setDimensions when you click the button, and this is when it is happening. It gets blurry/pixelated: you may want to focus on the text and the hands. I've made a cleaner jsfiddle: https://jsfiddle.net/philippemiguet/Lay5t3et/8/

I've also made a screencast to show you what I see just in case: http://cl.ly/2Q3x1e283x2r

Are you seeing it this time?

Anyway, the fiddle ozooner shared shows it well :)

[philippemiguet]

I have made a new jsfiddle one with text only: https://jsfiddle.net/philippemiguet/4vw8znkd/7/

As you can see the second text seems blurry and not as sharp as the first one

[asturur]

Check my magnified screenshot.

Do you see differences?

[ozooner]

Interesting...actually both are blurry for you. (See my screenshot first text is sharper than yours)

[philippemiguet]

@asturur @ozooner do you have a retina screen?

I have a Retina one and I experience the blur on Chrome / Firefox / Safari.

My friend tried on a non-retina and he can't spot any differences.

[ozooner]

Not sure if non-mac screens qualify as retina, but my resolution is 2560x1440

[asturur]

if you are a retina user, please download the latest source from here and build it. You should be safe. Otherwise there is still some bug.

[philippemiguet]

@asturur indeed it does work with the last build :) Sorry for not testing before with this latest version. Maybe we can add in the Contributing.md to test with the latest build before opening an issue? :) We can close for me.

Also, one tiny question, are the last commit gonna be part of the new release?

[asturur]

i'm plan to do a nightly builder.

[philippemiguet]

Thanks @asturur for the answer! You rock!

[maertz]

I'm a little confused, I'm still struggling with this issue and I don't understand what's wrong.
Since 1.5.0+ something changed which influences the output crispiness. I tried to trace it down but I had no luck. I've tested this on two machines, one with retina display, another without retina display. I've disabled "enableRetinaScaling" to compare both versions with each other.

I understand that if "enableRetinaScaling" has been disabled the visual on the actual screen might be blurry" but when I export the output (with the actual size of the canvas) the results should be the same as on "non retina displays" - right?

RETINA DISPLAY

Fabric 1.5.0

• Chrome Version 54.0.2840.98 (64-bit)
• enabledRetinaScaling: false (not supported in 1.5.0)
• devicePixelRatio: 1 (not supported in 1.5.0)
  
  

Fabric 1.7.0

• Chrome Version 54.0.2840.98 (64-bit)
• enabledRetinaScaling: false
• devicePixelRatio: 2 (Retina display)
  
  

NON RETINA DISPLAY

Fabric 1.5.0

• Chrome Version 54.0.2840.98 (64-bit)
• enabledRetinaScaling: false (not supported in 1.5.0)
• devicePixelRatio: 1 (not supported in 1.5.0)
  
  

Fabric 1.7.0

• Chrome Version 54.0.2840.98 (64-bit)
• enabledRetinaScaling: false
• devicePixelRatio: 2 (Retina display)
  
  

Feel free to test/compare your output:

Doodle:
http://benjaminmaertz.de/amcharts/fabricTest/index-1.5.0.html
http://benjaminmaertz.de/amcharts/fabricTest/index-1.7.0.html

Chart:
http://benjaminmaertz.de/amcharts/fabricTest/chart/index-1.5.0.html
http://benjaminmaertz.de/amcharts/fabricTest/chart/index-1.7.0.html

I would appreciate your help a lot – this is driving me crazy :)

[asturur]

This is a separate issue.
Would you mind trying to disable objectCaching for fabric 1.7.0
on your pathGroup use objectCaching = false and see if hte crispness is restored.

[asturur]

Or open a fiddle with public code so i can try it.

[maertz]

thanks for the quick response but it looks like there is no difference at all :/

        // SET OBJECTCACHING
        if ( location.href.indexOf("objectCaching") != -1 ) {
            g.objectCaching = false;
            g.set({
                objectCaching: false
            });
            console.log("disabled object caching");
        }

RETINA (1.7.0)

The output seems to be the same...

NON RETINA (1.7.0)

Test

http://benjaminmaertz.de/amcharts/fabricTest/index-1.7.0.html?objectCaching=true
http://benjaminmaertz.de/amcharts/fabricTest/chart/index-1.7.0.html?objectCaching=true

[asturur]

so, just to recap, the dataurl output is not the same as canvas on non retina display. i have a non retina screen so i think i can solve this, but i would love to get a jsfiddle with loading and export code

[asturur]

I cannot get any difference worth investigating with very simpe fiddle:
https://jsfiddle.net/jf03bbc3/3/

So please if you can produce a simple fiddle that recreate the blurrines open a separate issue.

1.7.0 canvas

1.7.0 dataurl

1.5.0 canvas

1.5.0 dataurl

[asturur]

i notice a very small blur on the bottom red line. That blurriness is some half pixel position and is not really a fabricjs fault but more a sort of trying to position elements in theyr original positions.

fabric 1.5.0 was parsing the svg as width: 1100.5 height: 440.5 0 0 with a 1 border width
fabric 1.7.0 is parsing the svg as width 1100 height 670. that half pixel causes the blurrines.
If you position the object half pixel more left and down the blurriness disappear.

http://fabricjs.com/test/svg_import/ this is a page with many svg. if you observe it on a non retina screen do you notice blurriness?

[maertz]

Indeed, looks like the half pixel positioning is causing it. Thanks a lot for diving in – I appreciate your help!

I wrote a little helper to cancel these half pixel thingies and the output is much better now.

http://jsfiddle.net/1f0ubpn8/1/

[asturur]

i have to find out where it comes from and if it is right.
Not really sure what i should do.

2016-11-28 13:16 GMT+01:00 Bny [e-mail]:

Indeed, looks like the half pixel positioning is causing it. Thanks a lot
for diving – I appreciate your help!

I wrote a little helper to cancel these half pixel thingies and the output
is much better now.

http://jsfiddle.net/1f0ubpn8/1/
[image: screen shot 2016-11-28 at 13 15 42]
https://cloud.githubusercontent.com/assets/921705/20668015/cfebbc28-b56c-11e6-87fd-38f6c2d01c29.png [image:
screen shot 2016-11-28 at 13 15 49]
https://cloud.githubusercontent.com/assets/921705/20668016/cfebf8aa-b56c-11e6-8e2d-0ea24c4e726f.png

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

[maertz]

Looks like the coordinates system of the canvas works a little bit different than "expected".

Through a quick look up I found this interesting article:
http://diveintohtml5.info/canvas.html#pixel-madness

[MarcoMiltenburg]

What's the status of this? Does this now mean we have to start aligning/rounding to half pixels to prevent anti-aliasing? This sounds like a pretty fundamental problem that should be handled by the library (or even should not happen at all while drawing the canvas if you ask me).

[maertz]

I've fix this issue temporary by shifting all things by 0.5 pixel - worked well but comfortable is different.

[asturur]

is not that easy.
when rotation and scaling come in, half pixel is not an options. when you
use centering position you need half pixel just if the width is odd or even.

when canvas is zoomed and tralsated you do not know on what pixel will you
render.

sometimes you work on a big canvas in a small space and you have 10 pixels
in the space of one pixel. you cannot align everything to avoid aliasing

On Feb 24, 2017 1:31 PM, "Bny" [e-mail] wrote:

I've fix this issue temporary by shifting all things by 0.5 pixel - worked
well but comfortable is different.

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

[MarcoMiltenburg]

I recently upgraded a project from 1.4 to 1.7 and it was not a problem with 1.4. So something must have changed in 1.5 or up that causes this.

[asturur]

yes, the strokewidth is included in the object bounding box in 1.5
This causes a shift of 0.5 pixel with the default strokewidth of 1.
But fixes lot of other things that fabric does.
Other than that from 1.4.11 upward, zoom and panning started to work better, people started to use it more and those defects are more visible.

staying on 1.4 is not an option from my point of view.
You can set strokeWidth to 0 in the prototype and disable caching if you want to have a 1.4 experience like but have the newest fixes and functions.

I have to investigate if ctxImageSmoothScaling set to false can fix the blurring problems at expense of general uglyness.

[MarcoMiltenburg]

I've had some more time to dig in but even the simplest of code (without a border) causes blurry lines. Look at this JSFiddle: http://jsfiddle.net/dosmLq0n/

Even this causes blurry lines on non-retina screens:

When I open it on my retina MBP it renders sharp. But shouldn't this render just fine on non-retina screens as well ??

[MarcoMiltenburg]

@maertz That trick seems to work on Windows 10 but not on Windows 7 or macOS 10.11 on a non-retina MBP or even with macOS 10.12 on a retina MBP in non-retina mode (i.e. with an external monitor attached), all using the same Chrome 56 browser.

[asturur]

http://jsfiddle.net/dosmLq0n/1/

here there are 2 examples of things rendering good.

as you can see, any other number combination will render bad.
There is no much thing i can do.
I can maybe improve the positioning over the cachecanvas ( maybe ) to achieve the same number of blurried/unblurried cases as with cache disabled.

but blur will be there for half pixels

[MarcoMiltenburg]

Thanks, that seems to fix the issue. Object caching is not really important for this project.

The blurring problem only seems to happen with objects that are drawn, e.g. rects, circles or paths but not e.g. with text or SVG's that are loaded dynamically. Is this correct? Just checking, otherwise I have a lot more code to check / fix.

[asturur]

blurrying happens anyway. in some shape is not evident.
a circle for example is either pixellated or blurry.

that bluriness is anti aliasing, when anti aliasing happens twice, looks bad