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