Full screen canvas on mobile-devices

Question

I have created a small canvas game and I want it to work both on PCs and mobile devices.

On PC the canvas area works as expected but the problem comes when designing for mobile devices.

Is there a way (CSS or javascript) so that a canvas area inside a website would become full-screen when the user double-taps it? You can't play the game unless the canvas is large enough to fit the entire screen but I find it difficult to zoom so that the canvas is exactly full-screen on the mobile device.

In other words I want a CSS or javascript/jQuery solution to full-screen (set the zoom on the device to perfectly-fit the canvas area) the canvas area on a mobile device.

Example

canvas{
    width:624;
    height:351;
    background:red;
}

Try double-tapping on an iPhone for example. The default action on iPhone's Safari is to zoom ~ as much as the canvas, but it still doesn't perfect fit the canvas. For now we should ignore aspect ratio, but an answer that would also add some blank black strips at the top and bottom if the aspect ratio of the canvas is not the same as the device's screen would be great :D

Or, to put it differently: When the users double-tap I want the screen to "lock on" the canvas, disabling panning or zooming until the user double-taps again.

Answer 1

From:

http://impactjs.com/documentation/impact-on-mobile-platforms#always-render-in-the-native-resolution

If one pixel on your Canvas does not directly correspond to one pixel of the device's screen the whole Canvas has to be scaled by the browser before being shown – which is extremely slow.

Most mobile browser support the viewport meta tag. With this tag you can lock the zoom level of your page to 1, i.e. no zoom.

<meta name="viewport" content="width=device-width; 
    initial-scale=1; maximum-scale=1; user-scalable=0;"/>

This already ensures that the Canvas is rendered in its native resolution.