HTML5 Canvas 100% de alto y ancho

Estoy tratando de hacer que este script de canvas de gotas de lluvia ocupe el 100% de ancho y alto, pero nada de lo que parece hacer funciona. Intenté cambiar el CSS y el alto / ancho en el área Lienzo, pero no cambia nada, o hace que no funcione en absoluto. La única vez que probé algo que realmente lo hizo a tamaño completo, parecía tener un efecto extraño en las gotas de lluvia, se volvieron borrosas y mucho más grandes, por lo que en realidad debe haber estirado el canvas en lugar de hacerlo más grande. Aquí está el código para el canvas pnetworkingeterminado de 800×800 píxeles.

Estilo

<style> article, aside, figure, footer, header, hgroup, menu, nav, section { display: block; } </style> 

Script para canvas

 <script type="text/javascript"> var canvas = null; var context = null; var bufferCanvas = null; var bufferCanvasCtx = null; var flakeArray = []; var flakeTimer = null; var maxFlakes = 200; // Here you may set max flackes to be created function init() { canvas = document.getElementById('canvasRain'); context = canvas.getContext("2d"); bufferCanvas = document.createElement("canvas"); bufferCanvasCtx = bufferCanvas.getContext("2d"); bufferCanvasCtx.canvas.width = context.canvas.width; bufferCanvasCtx.canvas.height = context.canvas.height; flakeTimer = setInterval(addFlake, 200); Draw(); setInterval(animate, 30); } function animate() { Update(); Draw(); } function addFlake() { flakeArray[flakeArray.length] = new Flake(); if (flakeArray.length == maxFlakes) clearInterval(flakeTimer); } function blank() { bufferCanvasCtx.fillStyle = "rgba(0,0,0,0.8)"; bufferCanvasCtx.fillRect(0, 0, bufferCanvasCtx.canvas.width, bufferCanvasCtx.canvas.height); } function Update() { for (var i = 0; i < flakeArray.length; i++) { if (flakeArray[i].y < context.canvas.height) { flakeArray[i].y += flakeArray[i].speed; if (flakeArray[i].y > context.canvas.height) flakeArray[i].y = -5; flakeArray[i].x += flakeArray[i].drift; if (flakeArray[i].x > context.canvas.width) flakeArray[i].x = 0; } } } function Flake() { this.x = Math.round(Math.random() * context.canvas.width); this.y = -10; this.drift = Math.random(); this.speed = Math.round(Math.random() * 5) + 1; this.width = (Math.random() * 3) + 2; this.height = this.width; } function Draw() { context.save(); blank(); for (var i = 0; i < flakeArray.length; i++) { bufferCanvasCtx.fillStyle = "white"; bufferCanvasCtx.fillRect(flakeArray[i].x, flakeArray[i].y, flakeArray[i].width, flakeArray[i].height); } context.drawImage(bufferCanvas, 0, 0, bufferCanvas.width, bufferCanvas.height); context.restre(); } </script> 

Y finalmente aquí está el cuerpo

 <body onload="init()"> <canvas id="canvasRain" width="800px" height="800px">Canvas Not Supported</canvas> </body> 

body, #canvasRain {width:100%; height:100%; margin:0px;} body, #canvasRain {width:100%; height:100%; margin:0px;} configurará su tamaño correctamente, pero su problema es que su altura / ancho de canvas que está utilizando para hacer su dibujo no recoge los valores de px adecuados al configurarlos con% 's. Y ahí es donde entra la incrustación con los copos difusos. Se necesita un tamaño de canvas pnetworkingeterminado y se estira hasta el 100% de la vista. Agregar algo como

 bufferCanvas.width = canvas.width = window.innerWidth; bufferCanvas.height = canvas.height = window.innerHeight; 

Parece funcionar. Y es posible que desee / necesite manejar events de cambio de tamaño para volver a calcularlo. Aquí hay una muestra . No pude hacer que jsFiddle trabaje para mí, así que es todo.

Configuré un violín que muestra cómo cambiar el tamaño del canvas usando un simple CSS.

http://jsfiddle.net/C7LfU/1/

 $('#canvasRain').css({ "height": window.innerHeight, "width": window.innerWidth }); 

También me adelanté y actualicé tu animation para usar requestAnimationFrame. Esto probablemente causó que sus escamas sean borrosas: la animation se rezagó desde que setTimeout no escala cuando el browser está realmente listo para dibujar otro marco.

 window.requestAnimFrame = (function () { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function (callback) { window.setTimeout(callback, 1000 / 60); }; })(); function animate() { requestAnimFrame(animate); Update(); Draw(); } 

Lea un poco más acerca de por qué debería usar requestAnimationFrame en: http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/