Text in HTML Canvas

Tekst tekenen op het canvas

De belangrijkste eigenschappen en methoden om tekst op het canvas te tekenen zijn:

• font - Definieert de lettertype-eigenschappen van de tekst
• fillText(text,x,y) - Tekst "gevuld" tekenen op het canvas
• strokeText(text,x,y) - Tekst tekenen op het canvas (zonder vulling)

Gebruik fillText()

Voorbeeld

Stel de lettertype in op "30px Arial" en schrijf de tekstvullende tekst op het canvas:

JavaScript:

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

Try it yourself

Gebruik strokeText()

Voorbeeld

Stel de lettertype in op "30px Arial" en schrijf de tekst op het canvas (zonder vulling):

JavaScript:

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

Try it yourself

Voeg kleur toe en center de tekst

Voorbeeld

Stel de lettertype in op "30px Comic Sans MS" en schrijf het rode tekstvullende tekst centrair op het canvas:

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);

Try it yourself

See also:

Complete Canvas Reference Manual of CodeW3C.com