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