DEV Community

loading...
Cover image for Canvas Javascript: Scrivere del testo

Canvas Javascript: Scrivere del testo

camizzilla profile image Roberto ・2 min read

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)
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (2)

pic
Editor guide
Collapse
casiimir profile image
casiimir

Ottimo lavoro Roberto, continua così sono utilissime!

Collapse
camizzilla profile image
Roberto Author

Grazie mille. Contiunerò sicuramente perchè serve più a me. Sto scoprendo delle funzioni che avevo sottovalutato.