JavaScript ist eine Programmiersprache, die eigentlich keine Grafik-Fähigkeit mitbringt. Mit HTML5 wurde jedoch ein neues Element Canvas (Zeichenfläche) eingeführt. Mit Canvas ist es möglich Grafiken, Graphen und einfache Animationen mit Hilfe von JavaScript dynamisch zu erzeugen. Der aktuelle Spezifikationvorschlag ist auf der Seite www.whatwg.org einzusehen. Eine Beschreibung der Funktionen findet man auf der folgenden Seite:

 CanvasRenderingContext2D; mozilla.org

Das Canvas-Element wurde ursprünglich von Apple im OS X Dashboard zum skriptbasierten Erstellen von Minianwendungen (sogenannten Widgets) ins Leben gerufen und wurde somit vom hauseigenen Browser Safari unterstützt. Der Support seitens Mozilla begann mit der Gecko-Engine in Version 1.8, die im Firefox 1.5 verwendet wurde. Opera kommt ab Versionsnummer 9 mit Canvas zu recht.

Einzig der Internet Explorer (IE) in allen Varianten bietet keine Unterstützung des canvas-Elementes (Stand 2009). Bisher ist dies auch nicht geplant. Der IE kennt intern durch die VML-Erweiterung jedoch ähnliche Zeichen-Funktionen. Das ExplorerCanvas-Skript excanvas.js bildet einen Teil der Canvas-Spezifikation auf diese VML-Funktionen ab, was dem Internet Explorer die fehlende Unterstützung nachliefert.

Unterdessen (Stand 2015) unterstützen alle relevanten Browser HTML-5 und Canvas sehr gut.

Das JsGraph-Modul baut auf dem Canvas-Element auf. Es stellt vereinfachte Funktionen bereit, die spezialisiert sind zum Zeichnen von mathematischen 2D-Funktionen. Es liefert eine Implementation für Html-Textausgabe nach.

 JSG Test: Html Text

Implementation von Html-Text

Das JsGraph-Modul unterstützt zwei Arten von Textausgabe: Canvas-Rendering und Html-Rendering (siehe TextRendering). Canvas-Text erzeugt Pixel-Grafik wie alle anderen Canvas-Zeichenfunktionen. Die Canvas-Texte können Transformiert (skaliert, gedreht, verzerrt) werden. Canvas-Texte sind nicht selektierbar und Html-Tags werden nicht interpretiert. Weitergehende Formatierungen innerhalb eines String sind daher nicht möglich und müssen selbst programmiert werden.

Die Html-Texte werden in Div-Elemente vom Browser gerendert, welche ich an den passenden Stellen je nach Text-Ausrichtung und Position überlagere. Da dieser Art erzeugte Texte nicht auf der Zeichenfläche selbst gezeichnet werden, hat diese Methode ein paar Nachteile, aber auch Vorteile, je nach Anwendungsfall:

• Texte liegen immer vor der Grafik
• Die Webseite kann auch nach den Grafik-Texten durchsucht werden
• Die Grafik-Texte können selektiert und kopiert werden
• Es sind alle HTML-Formatierungen und alle Schriftarten des Systems verwendbar
• Es können alle Unicode-Zeichen verwendet werden
• Die Texte können nur horizontal "gezeichnet" werden (ausser es werden CSS Transformationen verwendet)
• Der Text wird am Canvas-Rand umgebrochen, nicht geclippt.

Für die Html-Textausgabe wird das Canvas-Element in einen Div-Container gepackt. Die Div-Elemente, welche die Html-Texte enthalten, werden bezüglich dieses Containers positioniert.

Die von mir in JsGraph gewählte Implementation von Html-Text war inspiriert durch das Tool von Oliver Steele. Es gibt aber auch andere Implementationen von Texten für Canvas:

• canvaspaint.org Rendering text with <canvas> - CanvasPaint blog (stellt ein paar Methoden vor)
• jim.studt.net Primitive Text Functions for the HTML5 <canvas> Element - simple vector fonts for pen plotters
• developer.mozilla.org: Drawing text using a canvas - Introduced in Gecko 1.9
• developer.mozilla.org: Canvas tutorial