Home / Programmazione / HTML - CSS / Canvas con altezza e larghezza al 100%
Mattepuffo

Canvas con altezza e larghezza al 100%

Canvas con altezza e larghezza al 100%

L'elemento <canvas> di HTML5 è un elemento un pò particolare perchè nasce con lo scopo di crearci animazioni dentro.

In generale, quindi, deve avere un'altezza e una larghezza precise.

In alcuni casi potrebbe essere necessario fare in modo che sia automaticamente all 100% rispetto all'elemento in cui si trova.

Abbiamo due possibilità.

 

La prima è questa:

window.onload = function() {

 var canvas = document.getElementById('my_canvas'), context = canvas.getContext('2d');
 window.addEventListener('resize', resizeMyCanvas, false);

 function resizeMyCanvas() {
   canvas.width = window.innerWidth;
   canvas.height = window.innerHeight;
   redrawMyCanvas();
 }

 resizeCanvas();

 function redrawMyCanvas() {
   // DO STUFF
 }

}

A questo script in Javascript aggiungete queste regole CSS:

* { margin:0; padding:0; }
html, body { width:100%; height:100%; }
canvas { display:block; }

Dentro la funzione redrawMyCanvas dovete metterci il codice che vi serve; per il CSS invece non molto da dire.

La seconda soluzione è leggermente diversa e prevede una soluzione all-in-one:

<!DOCTYPE html>
  <html style="width:100%;height:100%;">
  <body style="width:100%;height:100%;margin:0;padding:0">
    <canvas id="my_canvas" style="width:100%;height:100%;background-color:yellow;display:block">Canvas non supportato.</canvas>
    <script type="text/javascript">
    var canvas = document.getElementById('my_canvas');
    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>

Quale dei due sia meglio non saprei; io preferisco la prima perchè più ordinata.