Working with canvas in different screen sizes

Question

I'm planing to create a simple game using the HTML5 <canvas> tag and compile the code into a native application using Phonegap, but the problem is that canvas use coordinates that are not relative to the size of it, so 20,20 on a 960x640 screen is different on a 480x800 one.

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

Answer 1

Use innerWidth/innerHeight of window object:

canvas.height = window.innerHeight;
canvas.width = window.innerWidth;

It'll auto-adjust any screen; you must test for cross platform/screen compatibility!

Also, instead of using pre-defined x,y co-ordinates, use something like this:

var innerWidth = window.innerWidth;
x = innerWidth / 3;