[Feature] Different width/height for canvas and canvas style

[shunia]

Motivation

The canvas logical size, which is different than it's dom size(computed css style size).

I want to have them seperated so that I could set the logical size to the original size of the rendering texture, so that I could get the image data in the original resolution, but still be able to change the canvas dom size to fit the design.

Detailed Description

For now when calling setSize on a view, the logical size and the dom size are changed altogether, for example if I want to maintain the original resolution to 512512, I would want to call setSize(512, 512), but then the canvas dom size changed to 512512 too, which is not expected.

[finetjul]

I guess that's a fine request. Feel free to create a PR.
It would however have to come with a good interactive example because it is a tricky subjects that many face and got wrong.

[shunia]

@finetjul But as I have tested, if set size differently like this the image is stretched:

view.setSize(512, 512);

view.getCanvas().style.width = '256px';
view.getCanvas().style.height = '512px';

what is the correct way of doing this?

[finetjul]

did you check aspect-ratio?

[shunia]

did you check aspect-ratio?

aspect-ratio is based on the width and height attribute on canvas, if call setSize(512, 512) then the aspect-ratio will be auto 512 / 512.

[shunia]

Hi @finetjul ,
I have created a simple runnable example here that you chould check out to see what is wrong here.

If we can not achieve the requested feature by the current apis, then what should we do to implement something like this?

[finetjul]

You need to use the ResizeObserver to propagate the aspect ratio to the underlying render window.