Canvas Javascript: Scrivere del testo

#javascript #canvas #testo

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.

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.