JavaScript: creare un pattern di sfondo con l'elemento canvas

Le API JavaScript dell'elemento HTML5 canvas permettono di ottenere effetti molto interessanti dal punto di vista puramente grafico. In questo articolo vedremo come creare un pattern di sfondo usando appunto queste API.

La seguente funzione crea un elemento canvas, ne fissa le dimensioni e poi utilizza tali dimensioni per creare tante immagini PNG ripetute quanti sono i valori di larghezza e altezza dell'elemento:

function generateNoise(opacity) {
   if ( !!!document.createElement('canvas').getContext ) {
      return false;
   }

   var canvas = document.createElement('canvas'),
   ctx = canvas.getContext('2d'),
   x, y,
   number,
   opacity = opacity || .2;

   canvas.width = 45;
   canvas.height = 45;

   for ( x = 0; x < canvas.width; x++ ) {
      for ( y = 0; y < canvas.height; y++ ) {
         number = Math.floor( Math.random() * 60 );

         ctx.fillStyle = "rgba(" + number + "," + number + "," + number + "," + opacity + ")";
         ctx.fillRect(x, y, 1, 1);
      }
   }

   document.body.style.backgroundImage = "url(" + canvas.toDataURL("image/png") + ")";
}

Esempio d'uso:

generateNoise(.7);​

Potete visionare l'esempio finale in questa pagina.