Testo e immagini su canvas

Imposti il font: ctx.font = "bold 24px sans-serif". Disegni: ctx.fillText("Hello", x, y) o ctx.strokeText("Hello", x, y). La coordinata y corrisponde alla linea di base del testo: aggiunga l'altezza delle ascendenti al di sopra di essa per posizionare correttamente il testo all'interno di un riquadro.

ctx.textAlign controlla l'allineamento orizzontale: "left" (predefinito), "center", "right". ctx.textBaseline controlla l'allineamento verticale rispetto a y: "top", "middle", "alphabetic" (predefinito), "bottom". Per centrare il testo, imposti entrambi su "center" e "middle".

ctx.measureText("text") restituisce un oggetto TextMetrics con la larghezza e le metriche del font. Lo utilizzi per calcolare dinamicamente le posizioni del testo: per centrarlo in un riquadro, mandarlo a capo a una larghezza massima o allineare a destra le etichette accanto ai punti dati.

Canvas non dispone di una funzione integrata per mandare a capo il testo. La implementi misurando la larghezza delle parole e accumulandole finché non si supera maxWidth, quindi iniziando una nuova riga a intervalli di lineHeight. Questa è una funzione di utilità comune nelle librerie di rendering per canvas.

ctx.drawImage(image, dx, dy) disegna un HTMLImageElement, HTMLCanvasElement o HTMLVideoElement in corrispondenza di (dx, dy). Carichi prima l'immagine e disegni nel relativo gestore onload, per assicurarsi che i pixel siano disponibili prima del disegno.

ctx.drawImage(image, dx, dy, dw, dh) ridimensiona l'immagine per adattarla a dw x dh. Il mantenimento delle proporzioni non è automatico: calcoli manualmente le dimensioni. Per mantenere le proporzioni: dw = img.width * scale; dh = img.height * scale.

La versione di drawImage con nove argomenti: ctx.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh). Il rettangolo sorgente (sx, sy, sw, sh) ritaglia una porzione dell'immagine; il rettangolo di destinazione (dx, dy, dw, dh) posiziona e ridimensiona il ritaglio sul canvas.

ctx.imageSmoothingEnabled = false disabilita l'interpolazione bilineare durante il ridimensionamento delle immagini. Lo utilizzi per la pixel art, quando si desidera un ridimensionamento nitido e senza smoothing. Lo lasci abilitato (impostazione predefinita) per le immagini fotografiche, per le quali un ridimensionamento uniforme produce risultati migliori.

Passi un canvas come sorgente a drawImage per eseguire il rendering di un canvas su un altro. Questo consente il rendering fuori schermo: disegni composizioni complesse su un canvas nascosto, quindi disegni quel canvas su quello visibile con una sola operazione a ogni fotogramma.

ctx.globalAlpha (da 0 a 1) applica una trasparenza uniforme a tutti i disegni successivi. ctx.globalCompositeOperation controlla il modo in cui i nuovi disegni vengono fusi con i pixel esistenti: "source-over" (predefinito), "multiply", "screen", "destination-out" (cancellazione) e altri.

canvas.toDataURL("image/png") esporta il canvas come data URL PNG in base64. Lo utilizzi per un download avviato dall'utente: crei un'ancora, imposti href sul data URL e l'attributo download su un nome file, quindi simuli un clic a livello programmatico.

Su che cosa influisce ctx.textBaseline = "middle" quando si disegna il testo?

Il rendering del testo su Canvas utilizza ctx.font, fillText/strokeText, textAlign e textBaseline per il posizionamento, e measureText per i calcoli di layout. Il disegno delle immagini tramite drawImage supporta il ridimensionamento e il ritaglio; globalAlpha e globalCompositeOperation controllano la fusione. toDataURL esporta il canvas per il download o per un ulteriore utilizzo.