Testo su HTML Canvas

Disegna il testo sulla tela

Le proprietà e i metodi più importanti per disegnare il testo sulla tela sono:

• font - Definisce le proprietà del font del testo
• fillText(text,x,y) - Disegna il testo "riempito" sulla tela
• strokeText(text,x,y) - Disegna il testo sulla tela (senza riempimento)

Usa fillText()

Esempio

Imposta il font a "30px Arial" e scrivi il testo sulla tela (con riempimento):

JavaScript:

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);

Prova da solo

Usa strokeText()

Esempio

Imposta il font a "30px Arial" e scrivi il testo sulla tela (senza riempimento):

JavaScript:

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);

Prova da solo

Aggiungi colore e allinea il testo al centro

Esempio

Imposta il font a "30px Comic Sans MS" e scrivi il testo rosso al centro della tela:

JavaScript:

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.font = "30px Comic Sans MS";
ctx.fillStyle = "red";
ctx.textAlign = "center";
ctx.fillText("Hello World", canvas.width/2, canvas.height/2);

Prova da solo

Vedi anche:

Manuale completo di Canvas su CodeW3C.com