Canvas blur after rescale page #7502

vitonsky · 2021-11-18T15:03:44Z

Canvas is not rescale content after resize page.
When we load web page with 50% page zoom and then set zoom to 100% canvas looks very bad like low resolution pucture.

I did try to manually rescale fabricjs inner objects while resize page like that:

export const fixCanvasSize = (canvas: fabric.Canvas) => {
    const lowerCanvasEl = (canvas as any).lowerCanvasEl;

    const width = (canvas as any).width;
    const height = (canvas as any).height;

    lowerCanvasEl.width = width;
    lowerCanvasEl.height = height;

    canvas.renderAll();
};

It's just resize inner canvases to consider actual size.

And this fix problem, but controls to resize objects are render wrong and i can't fix it.
If you have solution, tell about it.

Seems it impossible to fix on library user side.

As i think, we have some variable inside fabricjs which is not update after rescale page and always draw picture as while initiation. Maybe we should update this variables on the library level?

Version

3.6.0

Test Case

It reproduce on any page with fabricjs, try it on the http://fabricjs.com/

Information about environment

All browsers

Steps to reproduce

Scale page with canvas to 50%
Reload page
Scale page to 100%

Expected Behavior

Fine canvas picture

Actual Behavior

Blur on the canvas, because it was render as 50% size and then resized without rescale

rockerBOO · 2021-11-30T01:10:46Z

Try using setDimensions

   canvas.setDimensions({
      width: window.innerWidth,
      height: window.innerHeight
    });

vitonsky · 2021-11-30T13:30:01Z

@rockerBOO i've try it, but it not work for me.

I did try use only setDimensions, also tried set size for lowerCanvasEl and then call setDimensions and vice versa.
I also tried all options combinations. It did not fix this bug.

After call setDimensions canvas resize without fix of scale factor.

rockerBOO · 2021-12-01T16:14:02Z

  canvas.setWidth(window.innerWidth);
  canvas.setHeight(window.innerHeight);

  canvas.calcOffset();
  canvas.requestRenderAll();

I have also used this option. Don't try to adjust the lowerCanvasEl or upperCanvasEl. They are generally abstracted away where you shouldn't need to access them. You can infer things from them but manually adjusting is probably going to cause some conflict.

vitonsky · 2021-12-02T09:27:23Z

@rockerBOO unfortunately calcOffset is not fix canvas too. Is it work for you?
Btw, i not resize canvas object, i only rescale web page (but i set size explicitly for test it as you say)

I adjust lowerCanvasEl because this method is fix a image, but after this fix an object controls render with incorrect position.
I think that fabric isn't rescale lowerCanvasEl itself and have not hook to do it manual.
Under rescale i mean not only change size, but change size such a way to consider resolution, display size and page scale.

I've tried calcViewportBoundaries to fix controls, but it not work too.

rockerBOO · 2021-12-02T15:33:08Z

In my example I run that code on window.onresize = () => { ... } seriously only when the screen size changes and set it to the window inner values. This is all I do to resize it and no special css or other changes. Keeps the canvas at 100% width/height. Again don't touch lowerCanvasEl as that is probably messing up things, even if it "fixes" the size of the canvas.

vitonsky · 2021-12-02T17:00:59Z

@rockerBOO is you just set new size while resize event and it work for you? Did you have high resolution image after this manipulation? And if you will not do it you have low resolution image on canvas after rescale page?

rockerBOO · 2021-12-02T17:59:25Z

Slapped this example together.

<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/fabric@4.6.0/dist/fabric.min.js"></script>
<style>
body { margin: 0; }
</style>
</head>
	<body>
		<canvas id="canvas1"></canvas>
<script>
		window.onload = () => {
	const canvas = new fabric.Canvas("canvas1");

canvas.add(new fabric.Circle({ radius: 100, fill: 'red', top: 100, left: 100 }))
const onResize = () => {
		canvas.setWidth(window.innerWidth)
		canvas.setHeight(window.innerHeight)
}
window.addEventListener('resize', onResize)

		onResize()
}
</script>
	</body>
</html>

vitonsky · 2021-12-02T20:21:04Z

@rockerBOO i tried your example

I have blured image:

Reproduce steps:

scale page to 50%
reload page
reset scale of page to 100%

rockerBOO · 2021-12-02T20:56:57Z

Ahh yes I see what you're saying now. Sorry about that. I have noticed this as long as I have used it but just thought it was a canvas thing.

vitonsky · 2021-12-02T21:12:41Z

@rockerBOO it's fine. What you think about it? It seems like bug?
What we can do to fix it?

asturur · 2021-12-03T10:16:09Z

hi!
The issue here is that the pagezoom is mixed with retina scaling.
to be honest retina scale values that are lesser than 1 should be ignored to avoid blurryness.

vitonsky · 2021-12-03T17:19:30Z

@asturur hi. Can we implement some knob to manual update values which affect on this problem while render?
Or maybe we can fix this bug automatically inside fabricjs, if it possible.

I think little things like this is very important for high quality projects.

Thanks for attention

asturur · 2021-12-05T08:38:57Z

we should avoid setting retina scaling to less than 1 in fabricjs, since there are no browsers that have more css pixels than real pixels.
The bug would persist anyway, if you are a page zoom 200, and then set back to 100% you would have a larger canvas.

i think you can open a pr by yourself, the function is called getRetinaScaling and should never return a number smaller than 1.

Fix issue fabricjs#7502

vitonsky · 2021-12-05T13:54:59Z

@asturur thanks for explaining bug mechanic.

I've create PR #7537 with fix

Also i want to leave here solution for people from future who have this bug.

As told @asturur cause in devicePixelRatio property of fabricjs which is not equal with actual devicePixelRatio of window, so you should manually update this value, reinitialize retina scaling and render all like that:

const onResize = () => {
  // update devicePixelRatio
  fabric.devicePixelRatio = fabric.window.devicePixelRatio ||
                          fabric.window.webkitDevicePixelRatio ||
                          fabric.window.mozDevicePixelRatio ||
                          1;
  canvas._initRetinaScaling();

  // re-render canvas with new quality
  canvas.requestRenderAll();
}

window.addEventListener('resize', onResize)

It's should fix problem. Also, fabric is provide a setDimensions method which run _initRetinaScaling and recalc other dynamic properties itself, so maybe it will better to call

asturur · 2021-12-05T15:36:16Z

on my projects i attach a resize event on the canvas container and then i use setDimension to adapt the canvas.

vitonsky · 2021-12-05T17:19:37Z

@asturur yes, call setDimension is better than call inner method _initRetinaScaling on fabricjs user side.

Btw, what you think about some hook for fabric to update devicePixelRatio ?
Maybe something more abstract, like reinitializeInnerState which execute logic like in first initialization of fabric object.

It may be useful for cases like this bug, when some inner variable is more not actual after some changes which we can't predict.
We will just call something like fabric.reinitializeInnerState() and variables like fabric.devicePixelRatio will recalculate explicitly.

ShaMan123 · 2021-12-05T19:33:17Z

Thanks guys, I think this solves an issue in my project.
+1 to update device pixel ratio on resize internally, _onResize

asturur added the possible_feature label Dec 3, 2021

vitonsky added a commit to vitonsky/fabric.js that referenced this issue Dec 5, 2021

prevent render canvas with quality less than 100%

699ac68

Fix issue fabricjs#7502

vitonsky mentioned this issue Dec 5, 2021

prevent render canvas with quality less than 100% #7537

Merged

ShaMan123 closed this as completed Feb 18, 2022

a873054267 mentioned this issue Jun 28, 2022

the render result isn't responsive when canvas resize #8028

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Canvas blur after rescale page #7502

Canvas blur after rescale page #7502

vitonsky commented Nov 18, 2021 •

edited

rockerBOO commented Nov 30, 2021

vitonsky commented Nov 30, 2021

rockerBOO commented Dec 1, 2021

vitonsky commented Dec 2, 2021

rockerBOO commented Dec 2, 2021

vitonsky commented Dec 2, 2021

rockerBOO commented Dec 2, 2021

vitonsky commented Dec 2, 2021

rockerBOO commented Dec 2, 2021

vitonsky commented Dec 2, 2021

asturur commented Dec 3, 2021

vitonsky commented Dec 3, 2021

asturur commented Dec 5, 2021

vitonsky commented Dec 5, 2021

asturur commented Dec 5, 2021

vitonsky commented Dec 5, 2021 •

edited

ShaMan123 commented Dec 5, 2021

Canvas blur after rescale page #7502

Canvas blur after rescale page #7502

Comments

vitonsky commented Nov 18, 2021 • edited

Version

Test Case

Information about environment

Steps to reproduce

Expected Behavior

Actual Behavior

rockerBOO commented Nov 30, 2021

vitonsky commented Nov 30, 2021

rockerBOO commented Dec 1, 2021

vitonsky commented Dec 2, 2021

rockerBOO commented Dec 2, 2021

vitonsky commented Dec 2, 2021

rockerBOO commented Dec 2, 2021

vitonsky commented Dec 2, 2021

rockerBOO commented Dec 2, 2021

vitonsky commented Dec 2, 2021

asturur commented Dec 3, 2021

vitonsky commented Dec 3, 2021

asturur commented Dec 5, 2021

vitonsky commented Dec 5, 2021

asturur commented Dec 5, 2021

vitonsky commented Dec 5, 2021 • edited

ShaMan123 commented Dec 5, 2021

vitonsky commented Nov 18, 2021 •

edited

vitonsky commented Dec 5, 2021 •

edited