Canvas does not render at bigger sizes : is there a maximum size?

[jeremyallison]

For the purposes of my app I need to draw in a pretty big canvas, then pan / zoom the parent container using React native's Animated and react-native-gesture-handler.

I need to draw a kind of map of [x, y] elements.
So of course the total canvas width / height will be x * elementWidth / y * elementHeight

When drawing bigger maps, the canvas simply does not display. I've tried setting fixed values to width / height, and manually decreasing them up to a point where the canvas actually shows.

It seems there is some kind of width / height limitation? But I can't seem to pinpoint how or why.

For example :

canvas.width = 1864;
canvas.height = 1000;

Result :

Whereas

canvas.width = 1865; // +1 from previous example 
canvas.height = 1000;

Result :

Of course I could reduce the size of each individual item, but they would look more and more blurry with my pinch to zoom interaction.

I've looked up open / closed issues and could not find a similar one yet. Any ideas ? 💡

[mjziolko]

I had the same issue and decided to dig through the code.

On iOS at least, the screen resolution is scaled down from the device resolution, so there's a similar ratio applied to the canvas. You can find the device ratio by doing Dimensions.get('screen') or Dimensions.get('window') (https://reactnative.dev/docs/dimensions). The method outputs height, width, and scale, where the height and width elements are scaled down. height * scale is equal to the device's native pixel height, same with width * scale.

If you want to draw on something and have the native resolution coordinates, dividing by scale works: ctx.lineTo(x / scale, y / scale);