Sometime you want to create HTML5 with specific dimension, and then you make browser zooms on it to full screen.
A way to make it happened is to style the canvas tag so it will fill the screen. For example: style=”width: 100%”. With this method the canvas width will be the width of the screen (browser). However, this will stretch your contents and may not be satisfying.
But sometime you want to create dynamic HTML5 canvas that its dimension derived from user’s browser’s width and height without canvas’s contents. What we can do is first to style body element like this: Then we create canvas, and after creating canvas, we create script for it like this:
<script>
var canvas = document.getElementById("canvas");
var screenw = window.innerWidth;
var screenh = window.innerHeight;
canvas.width = screenw;
canvas.height = screenh;
var ctx = canvas.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(screenw,screenh);
ctx.stroke();
ctx.font = "30px Arial";
ctx.fillText("Hello World",100,100);
</script>
Viola… and the result is this:
And here is the full script:
<!DOCTYPE html>
<html>
<head>
<title>FullScreen Canvas</title>
</head>
<body style="margin:0 auto; overflow:hidden">
<canvas id="canvas">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var canvas = document.getElementById("canvas");
var screenw = window.innerWidth;
var screenh = window.innerHeight;
canvas.width = screenw;
canvas.height = screenh;
var ctx = canvas.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(screenw,screenh);
ctx.stroke();
ctx.font = "30px Arial";
ctx.fillText("Hello World",100,100);
</script>
</body>
</html>