# HTML: creare aree di disegno per JavaScript con il tag canvas L’elemento HTML `` ti permette di creare un’area che può essere riempita con grafici o animazioni tramite JavaScript. A questo scopo viene realizzato un oggetto di disegno 2D. Ricorrendo a diversi metodi per l’API del tag `` si definisce poi il contenuto desiderato. ## Cos’è il tag `` HTML? `` HTML è un elemento che mette a disposizione un’area di disegno in cui puoi **creare grafici o animazioni** con JavaScript. L’area disponibile viene definita indicando l’altezza e la larghezza. Grazie al pratico [tag HTML](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/tag-html/), questa area può essere inserita in qualsiasi parte di un documento [HTML](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/cose-lhtml/). Il contenuto di questa “tela” (la traduzione in italiano di “canvas”) non è un vero e proprio componente di un sito web, motivo per cui non è possibile usare [CSS](https://www.ionos.it/digitalguide/siti-web/web-design/come-imparare-il-css-una-guida-semplice/) o altri elementi HTML. Se il tag `` HTML non è supportato da un browser, il contenuto sarà quindi visualizzato come fallback. I browser moderni prevedono comunque il supporto nativo di questo elemento. ## Tag `` HTML: la sintassi Di per sé l’elemento `` HTML non mette a disposizione strumenti di disegno, ma crea soltanto la cornice in cui puoi generare elementi grafici con JavaScript. La sintassi di base dell’elemento è la seguente: ```html ``` Con `id` denomini l’elemento, con `width` e `height` gli assegni le dimensioni desiderate. Opzionalmente puoi usare altri parametri per specificare meglio la struttura della grafica. ## Il funzionamento di `` spiegato con un esempio semplice Servendoti 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ì: ```html

Esempio di canvas HTML

``` In questo modo però ottieni soltanto un’area libera. Solo con JavaScript puoi riempire l’elemento `` HTML generato con **forme, immagini, testi o gradienti** e, se necessario, animare questi oggetti. I contenuti sono inseriti sotto forma di pixel in una bitmap, che successivamente può poi essere convertita in una grafica PNG. Puoi usare l’elemento con `getElementById()`. Questo metodo funziona soltanto se all’area `` hai assegnato un ID univoco. Se desideri disegnare nell’area definita, o interagire in altro modo al suo interno, devi creare un **oggetto di disegno 2D**. Per l’esempio sopra, puoi farlo usando il codice seguente: ```html const CanvasEsempio = document.getElementById("CanvasEsempio"); const ctx = CanvasEsempio.getContext("2d"); ``` A questo punto, tutto è pronto per usare l’elemento `` HTML come tela da disegno. Con la funzione `fillRect()` possiamo ora collocare nell’area definita un rettangolo semplice, che deve essere mantenuto di color petrolio (in inglese: “teal”) e avere una larghezza di 200 pixel e un’altezza di 150 pixel. Collochiamolo a una distanza di 10 pixel dal bordo sinistro e di 50 pixel dal bordo superiore. Il codice si presenta come segue: ```html

Esempio di canvas HTML

``` ## Per cosa si può usare `` HTML? Nell’esempio sopra abbiamo inserito un rettangolo semplice, ma con l’elemento `` puoi realizzare anche forme molto più complesse. Ad esempio, **archi, testi, trasparenze, gradienti di colore e grafici** nei formati GIF, JPEG e PNG. Queste forme possono essere tagliate, scalate e posizionate a piacere. Mediante la funzione temporale di JavaScript è anche possibile realizzare animazioni all’interno di un tag `` HTML. ## Quali dimensioni può avere un elemento ``? Le dimensioni massime possibili per un `` HTML variano a seconda del browser e dell’ambiente. Ad esempio per iOS il limite è 4096 x 4096 pixel, mentre altri sistemi consentono anche dimensioni superiori a 10.000 x 10.000 pixel. Tuttavia, siccome l’area **dipende sempre dal rapporto d’aspetto**, gli elementi sono responsive e quindi adatti per dispositivi diversi. ## I metodi per le API di HTML `` 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 `` in qualsiasi momento. Di seguito riepiloghiamo i metodi più importanti all’interno delle API. ### Testo
Metodo Descrizione
`font` Definisce il tipo di carattere per i contenuti di testo
`fillText()` Inserisce testo (completamente pieno) in `` HTML
`strokeText()` Inserisce testo (solo contorni)
### Immagine
Metodo Descrizione
`drawImage()` Inserisce un’immagine o un video all’interno di un elemento `` HTML
### Disegno
Metodo Descrizione
`fillRect()` Disegna un rettangolo pieno
`strokeRect()` Disegna un rettangolo vuoto
`clearRect()` Cancella determinati pixel all’interno di un rettangolo
### Percorsi
Metodo Descrizione
`beginPath()` Inizia un nuovo percorso
`lineTo()` Disegna una linea verso il percorso
`moveTo()` Sposta il percorso in un punto all’interno della tela
### Progettazione
Metodo Descrizione
`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 Descrizione
`restore()` Ripristina uno stato precedente
`save()` Salva lo stato corrente e tutti i suoi attributi
## Esempio di `` HTML con testo e gradiente di colore Nel nostro ultimo esempio, usiamo alcuni di questi metodi. Per mezzo del tag `` HTML realizziamo 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: ```html

Esempio di canvas HTML con testo e un gradiente di colore

Usiamo i metodi strokeText() e gradient

``` This is a markdown version of: [https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/canvas-html/](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/canvas-html/) for AI/LLM consumption.