Issue during resize on Retina display

[MatBdry]

Hello,

I have an issue on retina display when I resize a canvas. The objects become blurred. I fixed this issue by calling the _initRetinaScaling each time I resize the canvas. Is this a good solution or do I missed some internal options?

Thanks you

[asturur]

What version are you using?
I think we fixed this.

[MatBdry]

I'm using 1.6.0-rc.1. Do you remember which commit it was?

[asturur]

I was wrong with commit for imageSmoothingEnabled.
https://github.com/kangax/fabric.js/pull/2337/files

The problem is similar anyway, it looks like that retinaScaling is just a dimensions + scale hack.
So probably resizing the canvas is interfering with it.

    /**
     * @private
     */
    _initRetinaScaling: function() {
      if (fabric.devicePixelRatio === 1 || !this.enableRetinaScaling) {
        return;
      }

      this.lowerCanvasEl.setAttribute('width', this.width * fabric.devicePixelRatio);
      this.lowerCanvasEl.setAttribute('height', this.height * fabric.devicePixelRatio);

      this.contextContainer.scale(fabric.devicePixelRatio, fabric.devicePixelRatio);
    },

[asturur]

@kangax i think that in renderAll when i call contextContainer.setTransform i'm killing retina scaling because i'm overriding the previous scaling.
What do you think?
i think we should switch to transform and save and restore in main renderAll cycle.

[asturur]

Issue with retina display and toDataURL #2562

The retina display support is a canvas resize + scale algorithm.

When we resize the canvas OR we set a transform in the canvas, the retina scaling hack get lost.

[kangax]

i think we should switch to transform and save and restore in main renderAll cycle.

Sounds reasonable, let's try it.

[asturur]

@mbaudry can you try your retina scaling problem with this:

https://www.deltalink.it/andreab/fabric/fabric.js

please accept https warning.
Please report if the retina scaling is still disappearing when you resize canvas.
do not call _initRetinaScaling manually.

Thank you.

[MatBdry]

Hello !

I tried with your version of fabric, but I still have the problem on retina display.

[asturur]

So after setting width or height of canvas, retina scaling disappear?
Sorry if i'm asking again but for me preparing a mac test setup is complex.

[MatBdry]

No problem, if I can help :) I call setDimensions on my canvas to change the width and the height, I call renderAll to update the size and then all the elements become blurred.

[asturur]

@mbaudry i updated the setDimension function to re add retina scaling.
Could you try again?
I'm very short on time and i'm using any help possible.

https://www.deltalink.it/andreab/fabric/fabric.js

regards.

If you have an ipad / tableg and you want try also the pinch gesture...

[MatBdry]

@asturur The resize works well now !

If I use a pinch gesture, even only a little bit, the canvas object becomes huge, it resizes to a gigantic size straight away

[asturur]

yes i noticed, it is like the gesture is continuos and zoom, zoom, zoom....

is not istantaneous, you can see it zooms continuosly.

only thing i can do is build a 1.5.0 and check how it behaved before. i need a debug setup for gestures.

we changed scale logic to accomodate generic transforms but i do not see any big changes that should break transform.