Setting width/height of canvas doesn't work

[Pingou]

If you set a custom width/height to the canvas, then use toDataURL, the image exported is wrong/not the same as the image shown.

Example:

`render() {

const canvasWidth = 900
const canvasHeight = 1280
const viewWidth = 300
const viewHeight = 500
var width = viewWidth
var height = viewHeight

return (
  <View style={{flex:1}}>

  <Canvas
        pointerEvents={'none'}
        style={{ width: width, height: height, borderWidth:1}}
        ref={(canvas) => {
          this.canvas = canvas;
          if (canvas && canvas.height != canvasHeight) {

            canvas.width = canvasWidth;
            canvas.height = canvasHeight;
            
            const context = canvas.getContext('2d');
            this.canvasScaleWidth =   canvasWidth / viewWidth;
            this.canvasScaleHeight =  canvasHeight / viewHeight;
          context.fillStyle = "#FF0000";
          context.fillRect(20, 10, 120, (viewHeight - 20) / PixelRatio.get());
          }

        }}
      />`

What is shown on the view:

The exported image (I removed transparency):

And what if I use scale? context.scale(this.canvasScaleWidth, this.canvasScaleHeight);

The view: The exported image (I removed transparency):

Any idea how to fix? I know nothing about canvas and I was wondering what it is that you do with the matrix transformation in the source code, and if that may be the issue. Any idea @iddan? Thank you.

[Pingou]

I think the issue is that in the autoScaleCanvas function the style width and height are set to be the same dimensions as the canvas internal width/height, but it shouldn't. I changed it with some other stuff and it fixed my issue, feel free to look at my fork.

[gun-ctrl]

I advise that you should set width and height after the canvas is initialized，I have encountered similar problems before