HTML5 Wallpaper Download

HTML5 Wallpaper Download

First approach:

JQUERY

(function() {
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d');

// resize the canvas to fill browser window dynamically
window.addEventListener('resize', resizeCanvas, false);

function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
redrawCanvas();
}
resizeCanvas();

function redrawCanvas() {
// redraw all things here
}
})();

CSS

* { margin:0; padding:0; } /* to remove the top and left whitespace */
html, body { width:100%; height:100%; } /* just to be sure these are full screen*/
canvas { display:block; } /* To remove the scrollbars */

Second approach, all in one:

<!DOCTYPE html>
<html style="width:100%;height:100%;">
<body style="width:100%;height:100%;margin:0;padding:0">
<canvas id="myCanvas" style="width:100%;height:100%;background-color:yellow;display:block">Your browser does not support the canvas tag.</canvas>
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,100,100);
ctx.strokeText("w:"+canvas.width+" h:"+canvas.height, 0, 8);
</script>
</body>
</html>