L’API Canvas di JavaScript fornisce metodi per disegnare immagini, testo e forme su una pagina web. Ecco come utilizzarla passo passo.
1. Creare un elemento canvas sul file HTML.
```
```
1. Nel file JavaScript, accedi all’elemento canvas utilizzando il metodo `getElementById()` del documento.
```
let canvas = document.getElementById(“myCanvas”);
```
1. Usa il metodo `getContext()` per ritornare un contesto di disegno sull’elemento canvas.
```
let ctx = canvas.getContext(“2d”);
```
1. Usa il contesto di disegno (ctx) per disegnare sul canvas. Ci sono molti metodi disponibili per il disegno, qui di seguito sono elencati alcuni esempi comuni.
```
// Disegna un rettangolo pieno
ctx.fillRect(50, 50, 100, 100);
// Disegna un rettangolo vuoto
ctx.strokeRect(50, 50, 100, 100);
// Imposta il colore di riempimento
ctx.fillStyle = “red”;
ctx.fillRect(50, 50, 100, 100);
// Imposta il colore del tratto
ctx.strokeStyle = “blue”;
ctx.strokeRect(50, 50, 100, 100);
// Disegna un percorso
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.stroke();
// Disegna un arco o un cerchio
ctx.beginPath();
ctx.arc(50, 50, 50, 0, Math.PI * 2);
ctx.stroke();
// Disegna del testo
ctx.font = “30px Arial”;
ctx.fillText(“Hello World”, 50, 50);
```
Ricorda che le coordinate x,y nel canvas iniziano dal canto superiore destro, quindi (0,0) è l’angolo in alto a sinistra.
Per informazioni più dettagliate o trovare metodi specifici, consulta la documentazione ufficiale di Canvas API su [MDN](https://developer.mozilla.org/it/docs/Web/API/Canvas_API).
