CSS, HTML und Javascript mit {stil}

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.

Canvas: Text einsetzen

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
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 die Metrik der aktuellen Schrifteinstellung zurück
// Text mit Kontur
let myString = "Text in einem Canvas ist nicht barrierefrei";
ctx.fillText(myString, 20,20);
ctx.font = "20px Verdana"
ctx.fillStyle = "#FFDFE0";
ctx.strokeStyle = "#CF9C9E";
ctx.fillText(theString, 20,160);						
ctx.strokeText(theString, 20,160);