Full screen canvas on mobile-devices

javascript css canvas mobile-devices

12,268

Solution 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.

Solution 2

Try this, not sure if works: Important stuff underlined by ^^^^^^^^

HTML-head

<meta id="metaset" name="viewport" content="**Whatever** user-scalable=yes;">
         ^^^^^^^^^                                       ^^^^^^^^^^^^^^^^^^

jQuery:

var settings = $("#metaset").attr("content");
$(put selector here).click(function() {
    if ($(this).hasClass("full")) {
        $(this).removeClass("full");
        $("meta").attr("content",settings+"user-scalable=yes");
    } else {
        $(this).addClass("full");
        $("meta").attr("content",settings+"user-scalable=no");
    }
});

CSS:

canvas.full {
    width: 100%;
    height: 100%;
    /* Other fullscreen CSS */
}

Solution 3

Edit: Looks like the html5 fullscreen-API currently does not work properly in most browsers for mobile-devices. (See comments)

With html5 things get eased alot. You can make use of the fullscreen-API. Should work on all up to date browsers, mobile devices and as well on desktop-pc's. Here an example:

<!doctype html>
<!--[if IE 6]><html lang="en" class="no-js ie6"><![endif]-->
<!--[if (gt IE 6)|!(IE)]><!--><html lang="en" class="no-js"><!--<![endif]-->

<head>
    <title>Canvas full screen</title>
</head>

<body onload=draw();>
        <canvas id="canvas">Please update your browser! </canvas>
</body>
<script>
        function draw(){
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");

        ctx.font = 'italic bold 30px sans-serif';
            //Need to use measure text
        ctx.fillText("Click!",20,100);
        }   

    function fullscreen(){
        var el = document.getElementById('canvas');

           if(el.webkitRequestFullScreen) {
               el.webkitRequestFullScreen();
           }
          else {
             el.mozRequestFullScreen();
          }            
        }

    document.getElementById('canvas').addEventListener("click",fullscreen)
</script>

</html>

Only problem I faced so far: You need to use some event-listener. It does not work directly on document.ready(..)

12,268

Author by

XCS

Algorithms are fun. UX is sublime. JavaScript is the one. Ping-pong to pass time. userTrack.net - Self Hosted Analytics Platform

Updated on June 27, 2022

Comments

XCS almost 2 years
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.