Desenarea textului

Împreună cu formele geometrice și imaginile, canvas permite și afișarea textului. Pentru aceasta, mai întâi trebuie să setăm proprietatea font a contextului canvas:

const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
context.font = "22px Verdana";

Proprietatea font acceptă ca valoare definiția fontului. În acest caz, este fontul Verdana cu înălțimea de 22 de pixeli. Se folosesc fonturile standard.

Pentru afișarea textului se utilizează două metode:

fillText(text, x, y): acceptă trei parametri: textul care va fi afișat (parametrul text) și coordonatele punctului de unde începe afișarea textului (parametrii x și y)
strokeText(text, x, y): acceptă parametri similari

Diferența dintre cele două metode constă în faptul că fillText() utilizează culoarea de umplere a formei (din proprietatea fillStyle) pentru a umple caracterele textului. Metoda strokeText() utilizează culoarea conturului formei (setată prin proprietatea strokeStyle) pentru a desena conturul caracterelor.

De exemplu, să afișăm un text folosind metoda fillText():

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>FDC.COM</title>
</head>
<body>
<canvas id="canvas" width="400" height="250"></canvas>
<script>
const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
context.font = "30px Verdana";
context.fillStyle = "navy";     // setăm culoarea textului
context.fillText("Hello FDC.COM", 20, 50);
</script>
</body>
</html>

Metoda fillText(text, x, y) acceptă trei parametri: textul care va fi afișat și coordonatele x și y ale punctului de unde începe afișarea textului.

Afișarea unui text similar folosind metoda strokeText():

const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
context.font = "30px Verdana";
context.strokeStyle = "navy";     // setăm culoarea textului
context.strokeText("Hello FDC.COM", 20, 50);

Proprietatea textAlign

Proprietatea textAlign permite alinierea textului față de una dintre laturi. Această proprietate poate lua următoarele valori:

left: textul începe de la poziția specificată
right: textul se termină înainte de poziția specificată
center: textul este centrat față de poziția specificată
start: valoarea implicită, textul începe de la poziția specificată
end: textul se termină înainte de poziția specificată

const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
context.font = "22px Verdana";
context.textAlign = "right";
context.fillText("Right Text", 120, 30);
context.textAlign = "left";
context.fillText("Left Text", 120, 60);
context.textAlign = "center";
context.fillText("Center Text", 120, 90);
context.textAlign = "start";
context.fillText("Start Text", 120, 120);
context.textAlign = "end";
context.fillText("End Text", 120, 150);

Proprietatea textBaseline

Proprietatea textBaseline stabilește alinierea textului față de linia de bază. Poate lua următoarele valori:

top
middle
bottom
alphabetic
hanging
ideographic

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>FDC.COM</title>
</head>
<body>
<canvas id="canvas" width="500" height="250"></canvas>
<script>
const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
context.font = "22px Verdana";
context.textBaseline="top";
context.fillText("Top",10,100);
context.textBaseline="bottom";
context.fillText("Bottom",45,100);
context.textBaseline="middle";
context.fillText("Middle",130,100);
context.textBaseline="alphabetic";
context.fillText("Alphabetic",205,100);
context.textBaseline="hanging";
context.fillText("Hanging",320,100);


</script>
</body>
</html>

Determinarea lățimii textului

Cu ajutorul metodei measureText() se poate determina lățimea textului pe canvas:

const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
context.font = "18px Verdana";
const text = context.measureText("Hello JavaScript");
console.log(text.width);