Question

I’m making a simple app using the HTML5 <canvas> tag and compile the code into a native app using Cordova, but the issue is that canvas use coordinates that are not relative to the size of it, and we plan to have it across Apple and Google supported devices…which could mean at least more than 10 screen sizes/resolutions.

So I want to know how to work with a <canvas> (which will be in fullscreen) on different screen sizes.

Will using model-based coordinates help?

Thanks!

Answer 1

I’m pretty sure you can only set one width and height in the canvas element itself. If you want to change its size depending on portrait, landscape, etc., you could use CSS media queries. I’m pretty sure that’s going to make your canvas not look very high quality in certain situations, since you’re essentially just blowing up or shrinking the size of a predefined element.

There might be a fancier way to redraw the canvas depending on screensize, etc., but I haven’t tried it.