CODEWITHSUNDEEP
javascripthtmlcordovacanvas
bouncingHippo
bouncingHippo

Reputation: 6040

HTML5 <canvas> scaling to different detected screen sizes

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!

Upvotes: 1

Views: 2515

Answers (1)

Michael Vattuone
Michael Vattuone

Reputation: 319

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.

Upvotes: 1

Related Questions