L’elemento canvas di HTML5 è stato concepito per mettere a disposizione degli sviluppatori uno strumento con il quale generare delle componenti grafiche al volo; sostanzialmente si tratta di un container per gli output, che potranno essere realizzati attraverso JavaScript, le componenti grafiche saranno invece prodotte tramite dei metodi appositamente dedicati.
Per ottenere un effetto basato sulla sovrapposizione dei poligoni (nel caso specifico, dei rettangoli) come quello riprodotto nell’immagine proposta in precedenza, è possibile fare ricorso ad un codice sorgente sul modello di quello proposto di seguito:
<!DOCTYPE html>
<html>
<body>
<canvas id="polCanvas" width="500" height="200" style="border:2px dashed green;">
Il browser non supporta l'elemento canvas.</canvas>
<script>
var x = document.getElementById("polCanvas");
var y = x.getContext("2d");
y.beginPath();
y.lineWidth = "2";
y.strokeStyle = "yellow";
y.rect(15, 15, 310, 160);
y.stroke();
y.beginPath();
y.lineWidth = "3";
y.strokeStyle = "orange";
y.rect(45, 45, 180, 70);
y.stroke();
y.beginPath();
y.lineWidth = "4";
y.strokeStyle = "violet";
y.rect(55, 55, 180, 80);
y.stroke();
y.beginPath();
y.lineWidth = "5";
y.strokeStyle = "red";
y.rect(65, 65, 180, 90);
y.stroke();
</script>
</body>
</html>Nel listato proposto il container associato all’elemento canvas prende il nome di polCanvas ed è a sua volta un rettangolo caratterizzato da un bordo verde tratteggiato; passando ai rettangoli contenuti da canvas, questi vengono prodotti tutti nello stesso modo, a partire dal metodo getContext().
Quest’ultimo restituisce in istanza un oggetto a sua volta in grado di mettere a disposizione dei metodi e delle proprietà per disegnare all’interno del container, il parametro “2d” permetterà di creare in esso linee, testi e altri contenuti bidimensionali. beginPath() è invece un metodo che inizializza le creazione dell’elemento grafico, in caso di inizializzazione precedente opera un reset che permetterà di realizzare un ulteriore elemento.
Il parametro numerico passato a lineWidth() determina lo spessore del bordo mentre strokeStyle() consentirà di definirne la colorazione. rect() è in questo caso il metodo più importante, infatti è grazie a quest’ultimo che si potrà stabilire la posizione del rettangolo all’interno del container (i primi due parametri corrispondono a delle coordinate cartesiane) e le sue dimensioni (gli ultimi due argomenti).
L’ultimo metodo sottoposto a chiamata sarà stroke(), ad esso spetterà il compito di disegnare il poligono all’interno del percorso inizializzato con beginPath().
