How is the resolution of a Canvas element determined and can we explicitly set it?

[bglgwyng]

<Canvas ref={canvasRef} style={{ width: 100, height: 100 }}>
  {/* ... */}
</Canvas>

function ff () {
const { width, height, encodeToBase64 } = canvasRef.current!.makeImageSnapshot();
width() // = 300;
height() // = 300;
}

Modifying the width, I saw that the snapshot's width is always 3 times larger to it.
I suppose it's the point-to-pixel ratio.

Is it(300x300) the size of the surface that the canvas belongs to?
If so, can I explicitly set the value of the size?

I found that there is a way to do it with offscreen surfaces, however, I can't find one for Canvas element.

I'm developing an image editor component now. There is a preview of the image under manipulation and the user will get the same image after saving. So it is required to create a Canvas element with a specific size to expect makeImageSnapshot to give the image of that size.

In the current situation, I should create a Canvas element with 1 / point-to-pixel size of the expected size and scale it point-to-pixel times using transform in style, which looks quite ugly. Do we have a better way to do the same thing?

[wcandillon]

@bglgwyng your best best is indeed offscreen to use the offscreen capabilities. Right it they are not available with the Canvas element but we will make it available in the short term, stay tuned there.