Per scrivere del testo su canvas ci sono due funzioni che possiamo usare dopo aver inizializzato l'elemento canvas e dopo aver richiamato il context, e sono:
fillText(testo, x, y)
strokeText(testo, x, y)
Gli argomenti di queste due funzioni sono identici e sono: la stringa di testo da visualizzare e la pozione x, y di partenza. La differenza tra le due è che strokeText traccia il contorno delle lettere, mentre fillText le scrive 'piene'.
STILI
Un metodo molto famigliare per chi usa il css e il metodo font che è uguale al suo corrispettivo per css.
Come nel css questo metodo può cambiare la dimensione, il tipo di font e lo spessore (esempio 'bold'), l'unica differenza è che tutti valori bisogna passarli come stringa.
ctx.font = 'valore';
Questo e gli altri metodi vanno messi prima delle funzioni che scrivono a video (fillText e strokeText)
ctx.font = 'bold 42px sans-serif';
ctx.fillText('Questo testo sarà grande 42px e in grassetto', 50, 30)
Un'altra altra formattazione del testo comune è l'allineamento, che può essere a destra, sinistra o al centro.
ctx.textAlign = "left" || "right" || "center" || "start" || "end";
Come si vede, ci sono altre due opzione utilizzabili oltre a quelle classiche: start che è l'opzione di default e allinea il testo all'inizio della linea, mentre end con la fine della linea;
ctx.font = '18px ';
ctx.textAlign = 'left';
ctx.strokeText('Text left', 150, 100);
ctx.textAlign = 'center';
ctx.strokeText('Text center stroke', 150, 200);
ctx.textAlign = 'end';
ctx.fillText('text start to end', 150, 300);
Per colorare il testo ci sono due funzioni colorfill e colorStoke il primo colora il volume della scritta e si usa prima di fillText, mentre il secondo colora il bordo e si usa prima di strokeText.
Queste funzioni sono quelle usate per colore anche le linee e le forme geometrico, quindi se volete approfondire vi rimando all'articolo Canvas Javascript: Come aggiungere lo stile alle figure geometriche, dove ho dedicato un paragrafo ai colori.
CONCLUSIONE
In questo articolo abbiamo imparato a rederizzare le scritte sul canvas.
Se avete dei consigli, suggerimenti o critiche costruttive lasciatemi un commento qui sotto oppure contattatemi trammite i miei social.
Top comments (2)
Ottimo lavoro Roberto, continua così sono utilissime!
Grazie mille. Contiunerò sicuramente perchè serve più a me. Sto scoprendo delle funzioni che avevo sottovalutato.