Javascript Canvas: text

Canvas Pfad, Kurven und Kreisbögen oder Cancas Arc mit Javascript

Text, der mit Javascript in ein Canvas gesetzt wird, kann mit den üblichen Eigenschaften wie Schrift, Schriftgröße, Farbe beliebig positioniert werden. Anders als SVG-Texte, die für Screenreader und Suchmaschinen lesbar sind, besteht der Text auf einem Canvas sofort aus Pixeln, sobald er gezeichnet wurde.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Canvas: Text einsetzen

Im Grunde genommen unterscheidet sich Text nicht von Pfaden und Formen und nutzt fillStyle und strokeStyle in gleicher Weise.

Ein Text, der mit Javascript in ein HTML5 Canvas gezeichnet wird, kann nicht durch CSS aufbereitet werden und ist für Screenreader und Suchmaschinen nicht lesbar. Text wird zu Pixeln wie jede andere Form.

Text in einem Canvas lässt sich mit Text vergleichen, der über JPG oder PNG-Bilder gelegt wird: Sobald die Bilddatei gespeichert wird, ist der Text in Pixel eingebrannt.

Text-Aktionen
Beschreibung
font
Schrift festlegen – und zwar genauso wie mit CSS. Default Schriftgröße ist 10px
textAlign
start (default), end, left, right, center
textBaseline
top, hanging, middle, alphabetic, ideographic, bottom – die Grundlinie für den Text
fillText(txt, x, y, [maxW])
Text als String rendern, wobei x, y nicht breiter als maxW werden dürfen
strokeText(txt, x, y, [maxW])
Text als String rendern, wobei x, y nicht breiter als maxW werden dürfen
measureText(text)
Gibt ein TextMetrik-Objekt der aktuellen Schrifteinstellung zurück zurück (z.B. width)
ctx.strokeStyle = "orange";
ctx.fillStyle = '#aaa';
ctx.lineWidth = 2;
ctx.fillText(theString, left,250);						
ctx.strokeText(theString, left,250);

Javascript Canvas und CSS

CSS Variablen funktionieren nicht im Javascript-Canvas. Wie weit ein Text läuft, kann mit measureText festgestellt werden. Na ja …

// measureText um eine Linie unter den Text zu setzen
var textW = ctx.measureText(theString);
ctx.beginPath();
ctx.lineWidth = 5;
ctx.moveTo (left , 300);
ctx.lineTo (textW.width,300);
ctx.stroke();