JavaScript: creare pattern 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:

'use strict';

const generatePattern = (element, opacity = 0.2) => {

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

   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);
      }
   }

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

Esempio d'uso:

'use strict';

generatePattern(document.body, 0.7);​