Text rendern

Es gibt im wesentlichen zwei Arten, um Text auf das Canvas zu bringen:

MethodeBeschreibung
fillText( text, x, y [, maxWidth])text : Der zu rendernde Text.

x : X-Koordinate des Startpunkts, an welcher der Text gerendert wird.

y : Y-Koordinate des Startpunkts, an welcher der Text gerendert wird.

maxWidth : Gibt die maximale Breite des Textes an.

strokeText( text, x, y [, maxWidth])text : Der zu rendernde Text.

x : X-Koordinate des Startpunkts, an welcher der Text gerendert wird.

y : Y-Koordinate des Startpunkts, an welcher der Text gerendert wird.

maxWidth : Gibt die maximale Breite des Textes an.

  • Html
  • Javascript
  • Ergebnis
<html> <head></head> <body> <canvas id="canvas_id" width="600" height="200" style="border: 1px solid red;"></canvas> </body> </html>
var Canvas = document.getElementById( "canvas_id" ); var Context = Canvas.getContext( "2d" ); Context.font = "40px Lucida"; Context.fillText( "CodingLab", 10, 50 ); Context.strokeText( "CodingLab", 10, 150 );

Im obigen Beispiel haben wir den Text "CodingLab" auf zwei Arten gerendert. Mit der Methode fillText haben wir einen ausgefüllten Text an der Stelle 10/10 angezeigt und mit der Methode strokeText haben wir die Konturen des Textes an der Stelle 10/100 angezeigt.

Textgröße, Schriftart und Style

Das Context-Objekt hat den Member font, welcher die gleiche Syntax wie bei CSS annimmt. Als generelle Regel kann man zunächst festlegen, dass die Schriftart immer gesetzt werden muss. Als mögliche Werte kommen folgende in Frage, wobei alle mit einem Leerzeichen voneinander zu trennen sind:

StyleBeschreibungWert
StyleGibt den Stil der Schriftart an.normal

italic

oblique
VariantGibt die Variante der Schriftart an.normal

small-caps
WeightGibt die Gewichtung des Textes an.normal

ligther

bold

bolder

100 - 900
Size/LineHeightGibt die Größe und Zeilenhöhe an. Wird nur ein Wert angegeben, zählt dieser für die Größe. Die Zeilenhöhe muss mit einem Schrägstrich hinter der Größe angegeben werden.40px

16px/24px
FamilyGibt die Schriftart an.Arial

Verdana

Lucida

Dabei gilt die folgende Syntax:

  • SYNTAX
/* size | family */ font: 2em Arial; /* style | size | family */ font: italic 2em Arial; /* style | variant | weight | size/line-height | family */ font: italic small-caps bolder 16px/3 cursive;
  • Html
  • Javascript
  • Ergebnis
<html> <head></head> <body> <canvas id="canvas_id" width="600" height="200" style="border: 1px solid red;"></canvas> </body> </html>
var Canvas = document.getElementById( "canvas_id" ); var Context = Canvas.getContext( "2d" ); // style | variant | weight | size | family Context.font = "oblique normal 100 40px Verdana"; Context.fillText( "CodingLab", 10, 50 ); // style | variant | weight | size/line-height | family Context.font = "normal small-caps 100 50px/70px Lucida"; Context.fillText( "CodingLab", 10, 150 );

Im obigen Beispiel haben wir zwei Texte untereinander mit verschiedenen Font-Styles gerendert. Hier heißt es jetzt ausprobieren, um sich mit den verschiedenen Stilistiken vertraut zu machen.

Text Farbe

Den Text können wir mit den Eigenschaften fillStyle und strokeStyle färben:

  • Html
  • Javascript
  • Ergebnis
<html> <head></head> <body> <canvas id="canvas_id" width="600" height="200" style="border: 1px solid red;"></canvas> </body> </html>
var Canvas = document.getElementById( "canvas_id" ); var Context = Canvas.getContext( "2d" ); Context.font = "40px Lucida"; Context.fillStyle = "#F00"; Context.fillText( "CodingLab", 10, 50 ); Context.strokeStyle = "#00F"; Context.strokeText( "CodingLab", 10, 150 );

Text Position

Die Position des Textes können wir mithilfe der Eigenschaft textAlign angeben:

WertBeschreibung
startSetzt den Text an den Startpunkt der Linie. Ist die Eigenschaft direciton=ltr, wird der Text links angezeigt. Ist die Eigenschaft direciton=rtl, wird der Text rechts angezeigt.
endSetzt den Text an den Endpunkt der Linie. Ist die Eigenschaft direciton=ltr, wird der Text rechts angezeigt. Ist die Eigenschaft direciton=rtl, wird der Text links angezeigt.
leftZeigt den Text links an.
rightZeigt den Text rechts an.
centerZeigt den Text mittig an.
  • Html
  • Javascript
  • Ergebnis
<html> <head></head> <body> <canvas id="canvas_id" width="600" height="400" style="border: 1px solid red;"></canvas> </body> </html>
var Canvas = document.getElementById( "canvas_id" ); var Context = Canvas.getContext( "2d" ); Context.font = "30px Lucida"; Context.textAlign = "right"; Context.strokeText( "Right", 200, 50 ); Context.textAlign = "center"; Context.strokeText( "Center", 200, 100 ); Context.textAlign = "left"; Context.strokeText( "Left", 200, 150 ); Context.textAlign = "start"; Context.strokeText( "Start", 200, 200 ); Context.textAlign = "end"; Context.strokeText( "End", 200, 250 ); Context.beginPath(); Context.strokeStyle = "#F00"; Context.moveTo( 200, 10 ); Context.lineTo( 200, 390 ); Context.stroke();

Im obigen Beispiel wurde derselbe Text mit allen Eigenschaften angezeigt. Zur Verdeutlichung, wurde an der X-Koordinate eine vertikale Linie gezogen, die die Ausrichtung der Texte zeigt.

Text Grundlinie

Für diese Eigenschaft ist ein wenig typografisches Verständnis vorteilhaft. Mithilfe der Eigenschaft textBaseline können wir die Ausrichtung des Textes an der Grundlinie beeinflussen. Folgende Werte werden angenommen:

WertBeschreibung
topSetzt die Grundlinie über den Text und zeigt diesen unter der Grundlinie an.
hangingSetzt die Grundlinie über den Text und zeigt diesen berührend unter der Grundlinie an.
middleSetzt die Grundlinie in die Mitte des Textes und zeigt diesen mittig an.
alphabeticSetzt die Grundlinie unter den Text und zeigt diesen berührend über der Grundlinie an.
ideographicSetzt die Grundlinie unter den Text und zeigt diesen über der Grundlinie an.
bottomSetzt die Grundlinie unter den Text und zeigt diesen berührend über der Grundlinie an. Bei dieser Methode werden die Unterlängen mit einbezogen. Unterlängen sind bspw. die Haken vom Buchstabe j oder g.
  • Html
  • Javascript
  • Ergebnis
<html> <head></head> <body> <canvas id="canvas_id" width="600" height="300" style="border: 1px solid red;"></canvas> </body> </html>
var Canvas = document.getElementById( "canvas_id" ); var Context = Canvas.getContext( "2d" ); Context.font = "30px Lucida"; Context.textBaseline = "top"; Context.strokeText( "Top", 200, 10 ); Context.beginPath(); Context.moveTo( 10, 10 ); Context.lineTo( 590, 10 ); Context.stroke(); Context.textBaseline = "hanging"; Context.strokeText( "Hanging", 200, 50 ); Context.beginPath(); Context.moveTo( 10, 50 ); Context.lineTo( 590, 50 ); Context.stroke(); Context.textBaseline = "middle"; Context.strokeText( "Middle", 200, 90 ); Context.beginPath(); Context.moveTo( 10, 90 ); Context.lineTo( 590, 90 ); Context.stroke(); Context.textBaseline = "alphabetic"; Context.strokeText( "Alphabetic", 200, 130 ); Context.beginPath(); Context.moveTo( 10, 130 ); Context.lineTo( 590, 130 ); Context.stroke(); Context.textBaseline = "ideographic"; Context.strokeText( "Ideographic", 200, 170 ); Context.beginPath(); Context.moveTo( 10, 170 ); Context.lineTo( 590, 170 ); Context.stroke(); Context.textBaseline = "bottom"; Context.strokeText( "Bottom", 200, 210 ); Context.beginPath(); Context.moveTo( 10, 210 ); Context.lineTo( 590, 210 ); Context.stroke();

Text Richtung

Mit der Methode direction können wir die Anzeigerichtung des Textes ändern. Das macht beispielsweise bei anderen Sprachen, die von rechts nach links gelesen werden, Sinn. Folglich gibt es auch nur drei Werte die dafür angenommen werden:

WertBeschreibung
ltrLeft-To-Right: Der Text wird von links nach rechts angezeigt.
rtlRight-To-Left: Der Text wird von rechts nach links angezeigt.
inheritDie Anzeigerichtung wird vom Canvas-Element oder dem Dokument übernommen.
  • Html
  • Javascript
  • Ergebnis
<html> <head></head> <body> <canvas id="canvas_id" width="600" height="300" style="border: 1px solid red;"></canvas> </body> </html>
var Canvas = document.getElementById( "canvas_id" ); var Context = Canvas.getContext( "2d" ); Context.font = "30px Lucida"; Context.direction = "ltr"; Context.strokeText( "Text von links nach recht", 250, 50 ); Context.direction = "rtl"; Context.strokeText( "Text von rechts nach links", 250, 150 );

Das obige Beispiel funktioniert nicht wie gewünscht. Die Antwort finden wir in der HTML5 Spezifikation der WHATWG:

The directionality of an element (any element, not just an HTML element) is either 'ltr' or 'rtl' [...]

Die Anzeigerichtung eines Elements (jedes Element, nicht nur ein HTML Element) ist entweder "ltr" oder "rtl".

Das bedeutet für uns, dass wir mithilfe des dir="" Attributs vom Element selbst die Richtung bestimmen können, allerdings nicht mit Javascript. Da unsere Standard-Anzeigerichtung ltr ist, wird der Text im obigen Beispiel auch von links nach rechts angezeigt. Wollen wir den umgekehrten Effekt, müssen wir das Attribut dir="rtl" im Canvas-Element setzen:

  • Html
  • Javascript
  • Ergebnis
<html> <head></head> <body> <canvas dir="rtl" id="canvas_id" width="600" height="300" style="border: 1px solid red;"></canvas> </body> </html>
var Canvas = document.getElementById( "canvas_id" ); var Context = Canvas.getContext( "2d" ); Context.font = "30px Lucida"; Context.direction = "ltr"; Context.strokeText( "Text von links nach recht", 250, 50 ); Context.direction = "rtl"; Context.strokeText( "Text von rechts nach links", 250, 150 );

Text Breite

Die Breite des Textes können wir zum einen vordefinieren oder bestimmen. Zum Setzen der maximalen Breite des Textes, müssen wir einfach nur den optionalen maxLength Parameter der strokeText() bzw. fillText() Funktion setzen:

  • Html
  • Javascript
  • Ergebnis
<html> <head></head> <body> <canvas id="canvas_id" width="600" height="200" style="border: 1px solid red;"></canvas> </body> </html>
var Canvas = document.getElementById( "canvas_id" ); var Context = Canvas.getContext( "2d" ); Context.font = "30px Lucida"; Context.strokeText( "Ein Text der auf 200px gestaucht wird.", 10, 50, 200 ); Context.strokeText( "Ein Text der maximal 550px lang sein darf.", 10, 150, 550 );

Wenn wir die Breite des Textes wissen wollen, können wir die Funktion measureText(text) aufrufen, die als einzigen Parameter den zu berechnenden Text annimmt. Als Ergebnis liefert sie ein Objekt, welches den einzigen Member width und damit unsere Breite in Pixeln enthält.

  • Html
  • Javascript
  • Ergebnis
<html> <head></head> <body> <canvas id="canvas_id" width="600" height="200" style="border: 1px solid red;"></canvas> </body> </html>
var Canvas = document.getElementById( "canvas_id" ); var Context = Canvas.getContext( "2d" ); var Text = "Ein Text mit unbestimmter Länge."; Context.font = "30px Lucida"; Context.strokeText( Text, 10, 50 ); Context.strokeText( Context.measureText(Text).width + "px", 10, 100 );