Full Screen Canvas On Mobile-devices
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.
<metaname="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)]><!--><htmllang="en"class="no-js"><!--<![endif]--><head><title>Canvas full screen</title></head><bodyonload=draw();><canvasid="canvas">Please update your browser! </canvas></body><script>functiondraw(){
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);
}
functionfullscreen(){
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(..)
Post a Comment for "Full Screen Canvas On Mobile-devices"