L’elemento HTML <canvas> ti permette di creare un’area che può essere riempita con grafici o ani­ma­zio­ni tramite Ja­va­Script. A questo scopo viene rea­liz­za­to un oggetto di disegno 2D. Ri­cor­ren­do a diversi metodi per l’API del tag <canvas> si definisce poi il contenuto de­si­de­ra­to.

Cos’è il tag <canvas> HTML?

<canvas> HTML è un elemento che mette a di­spo­si­zio­ne un’area di disegno in cui puoi creare grafici o ani­ma­zio­ni con Ja­va­Script. L’area di­spo­ni­bi­le viene definita indicando l’altezza e la larghezza. Grazie al pratico tag HTML, questa area può essere inserita in qualsiasi parte di un documento HTML.

Il contenuto di questa “tela” (la tra­du­zio­ne in italiano di “canvas”) non è un vero e proprio com­po­nen­te di un sito web, motivo per cui non è possibile usare CSS o altri elementi HTML. Se il tag <canvas> HTML non è sup­por­ta­to da un browser, il contenuto sarà quindi vi­sua­liz­za­to come fallback. I browser moderni prevedono comunque il supporto nativo di questo elemento.

Web Hosting
Diventa il n°1 della rete con il provider di hosting n°1 in Europa
  • Di­spo­ni­bi­li­tà garantita al 99,99%
  • Dominio, SSL ed e-mail inclusi
  • As­si­sten­za 24/7 in lingua italiana

Tag <canvas> HTML: la sintassi

Di per sé l’elemento <canvas> HTML non mette a di­spo­si­zio­ne strumenti di disegno, ma crea soltanto la cornice in cui puoi generare elementi grafici con Ja­va­Script. La sintassi di base dell’elemento è la seguente:

<canvas id="CanvasEsempio" width="[valore in pixel]" height="[valore in pixel]"></canvas>
html

Con id denomini l’elemento, con width e height gli assegni le di­men­sio­ni de­si­de­ra­te. Op­zio­nal­men­te puoi usare altri parametri per spe­ci­fi­ca­re meglio la struttura della grafica.

Il fun­zio­na­men­to di <canvas> spiegato con un esempio semplice

Ser­ven­do­ti della sintassi sopra puoi creare un’area di disegno semplice. Nell’esempio di seguito, quest’area deve avere una lunghezza di 500 pixel e un’altezza di 250 pixel. Il codice si presenta così:

<!DOCTYPE html>
<html>
<body>
<h1>Esempio di canvas HTML</h1>
<canvas id="CanvasEsempio" width="500" height="250" style="border: 1px solid grey"></canvas>
</body>
</html>
html

In questo modo però ottieni soltanto un’area libera. Solo con Ja­va­Script puoi riempire l’elemento <canvas> HTML generato con forme, immagini, testi o gradienti e, se ne­ces­sa­rio, animare questi oggetti. I contenuti sono inseriti sotto forma di pixel in una bitmap, che suc­ces­si­va­men­te può poi essere con­ver­ti­ta in una grafica PNG.

Puoi usare l’elemento con getElementById(). Questo metodo funziona soltanto se all’area <canvas> hai assegnato un ID univoco. Se desideri disegnare nell’area definita, o in­te­ra­gi­re in altro modo al suo interno, devi creare un oggetto di disegno 2D. Per l’esempio sopra, puoi farlo usando il codice seguente:

const CanvasEsempio = document.getElementById("CanvasEsempio");
const ctx = CanvasEsempio.getContext("2d");
html

A questo punto, tutto è pronto per usare l’elemento <canvas> HTML come tela da disegno. Con la funzione fillRect() possiamo ora collocare nell’area definita un ret­tan­go­lo semplice, che deve essere mantenuto di color petrolio (in inglese: “teal”) e avere una larghezza di 200 pixel e un’altezza di 150 pixel. Col­lo­chia­mo­lo a una distanza di 10 pixel dal bordo sinistro e di 50 pixel dal bordo superiore. Il codice si presenta come segue:

<!DOCTYPE html>
<html>
<body>
<h1>Esempio di canvas HTML</h1>
<canvas id="CanvasEsempio" width="500" height="250" style="border:1px solid grey"></canvas>
<script>
const CanvasEsempio = document.getElementById("CanvasEsempio");
const ctx = CanvasEsempio.getContext("2d");
ctx.fillStyle = "teal";
ctx.fillRect(10, 50, 200, 150);
</script>
</body>
</html>
html

Per cosa si può usare <canvas> HTML?

Nell’esempio sopra abbiamo inserito un ret­tan­go­lo semplice, ma con l’elemento <canvas> puoi rea­liz­za­re anche forme molto più complesse. Ad esempio, archi, testi, tra­spa­ren­ze, gradienti di colore e grafici nei formati GIF, JPEG e PNG. Queste forme possono essere tagliate, scalate e po­si­zio­na­te a piacere. Mediante la funzione temporale di Ja­va­Script è anche possibile rea­liz­za­re ani­ma­zio­ni all’interno di un tag <canvas> HTML.

Quali di­men­sio­ni può avere un elemento <canvas>?

Le di­men­sio­ni massime possibili per un <canvas> HTML variano a seconda del browser e dell’ambiente. Ad esempio per iOS il limite è 4096 x 4096 pixel, mentre altri sistemi con­sen­to­no anche di­men­sio­ni superiori a 10.000 x 10.000 pixel. Tuttavia, siccome l’area dipende sempre dal rapporto d’aspetto, gli elementi sono re­spon­si­ve e quindi adatti per di­spo­si­ti­vi diversi.

I metodi per le API di HTML <canvas> in breve

Abbiamo già descritto come si crea un oggetto del contesto 2D. Con uno di questi oggetti integrato tramite getContext("2d") puoi riempire l’area <canvas> in qualsiasi momento. Di seguito rie­pi­lo­ghia­mo i metodi più im­por­tan­ti all’interno delle API.

Testo

Metodo De­scri­zio­ne
font Definisce il tipo di carattere per i contenuti di testo
fillText() Inserisce testo (com­ple­ta­men­te pieno) in <canvas> HTML
strokeText() Inserisce testo (solo contorni)

Immagine

Metodo De­scri­zio­ne
drawImage() Inserisce un’immagine o un video all’interno di un elemento <canvas> HTML

Disegno

Metodo De­scri­zio­ne
fillRect() Disegna un ret­tan­go­lo pieno
strokeRect() Disegna un ret­tan­go­lo vuoto
clearRect() Cancella de­ter­mi­na­ti pixel all’interno di un ret­tan­go­lo

Percorsi

Metodo De­scri­zio­ne
beginPath() Inizia un nuovo percorso
lineTo() Disegna una linea verso il percorso
moveTo() Sposta il percorso in un punto all’interno della tela

Pro­get­ta­zio­ne

Metodo De­scri­zio­ne
addColorStop() Definisce i colori e le posizioni di un gradiente
createLinearGradient() Crea un gradiente lineare
createPattern() Ripete un elemento
shadowBlur Definisce la sfocatura di un’ombra
shadowColor Determina il colore di un’ombra

Altre funzioni

Metodo De­scri­zio­ne
restore() Ri­pri­sti­na uno stato pre­ce­den­te
save() Salva lo stato corrente e tutti i suoi attributi

Esempio di <canvas> HTML con testo e gradiente di colore

Nel nostro ultimo esempio, usiamo alcuni di questi metodi. Per mezzo del tag <canvas> HTML rea­liz­zia­mo prima una cornice da 500 x 250 pixel. Poi creiamo un oggetto 2D. Infine, inseriamo un titolo e un’altra frase con un gradiente di colore. Il codice da usare è il seguente:

<!DOCTYPE html>
<html>
<body>
<h1>Esempio di canvas HTML con testo e un gradiente di colore</h1>
<h2>Usiamo i metodi strokeText() e gradient</h2>
<canvas id="CanvasEsempio" width="500" height="250" style="border:1px solid grey"></canvas>
<script>
const c = document.getElementById("CanvasEsempio");
const ctx = c.getContext("2d");
ctx.font = "40px Calibri";
ctx.strokeText("Qui c’è un titolo", 20, 50);
ctx.font = "30px Calibri";
var gradient = ctx.createLinearGradient(0, 0, c.width, 0);
gradient.addColorStop("0", "teal");
gradient.addColorStop("0.5", "blue");
gradient.addColorStop("1.0", "green");
ctx.strokeStyle = gradient;
ctx.strokeText("Qui c’è un’altra frase", 20, 90);
</script>
</body>
</html>
html
Acquista e registra il tuo dominio con il provider n°1 in Europa
  • Domain Connect gratuito per una con­fi­gu­ra­zio­ne facile del DNS
  • Cer­ti­fi­ca­to SSL Wildcard gratuito
  • Pro­te­zio­ne privacy inclusa
Vai al menu prin­ci­pa­le