Apr 29 2009
canvas.text für jeden Browser
In den vergangenen Monaten habe ich schon viel über Canvas geschrieben. Doch etwas fehlte mir um damit umfassendere, grapfische Projekte umzusetzen: Die Möglichkeit Text zu integrieren.
Methoden zum Darstellen von Text sind in den (vorläufigen) Spezifikationen des Canvas-Elementes bereits vorgesehen.
Aktuelle Versionen von Webkit, Safari4 (Beta), Chrome 2 (Beta) und Firefox 3.5 (Beta) implementieren die Canvas-Text-Methoden, doch für die breite Masse eingesetzter Browser gilt dies nicht.
Die Lösung liefert ein Javascript-Bibliothek mit dem einfachen und treffenden Namen canvas-text.
Diese Bibliothek fügt die drei HTML5-Methoden zum Zeichnen von Text in Canvas (strokeText, fillText und measureText) den Browsers hinzu, die diese Funktionen nicht von Haus aus beherrschen (Firefox 2/3.0, Internet Explorer 6+, Opera 9+, Safari 3 und Chrome 1.0).
Canvas-text wurde so umgesetzt, dass es die Richtlinien des W3C und des WHATWG für das canvas-Elemente nach HTML5 erfüllt. Außer der ExCanvas-Bibliothek für den Internet Explorer und der canvas.text.js-Datei werden keine anderen Dateien benötigt.
Vorhandene browser-spezifische Implementierungen werden nicht überschrieben, es sei denn, man gibt dies explizit an.
Der Einbau sieht wie folgt aus:
<!--[if IE]><script type="text/javascript" src="excanvas.js" /><![endif]--> <script type="text/javascript" src="canvas.text.js" />
Um canvas.text auch zu nutzen,benötigt man nun noch Schriftarten. Typeface.js bietet einige Font-Files an. Eine größere Auswahl gibt es bei Mada’s Playground. Diese müssen unbedingt in einem Ordner mit dem Namen faces abgelegt werden, der sich im selben Verzeichnis wie die Datei canvas.text.js befindet.
Zudem gilt es zu beachten:
Der Dateiname canvas.text.js darf NICHT geändert werden!
Die Schriftartendateien müssen klein geschrieben werden und dem Format family-weight-style.js entsprechen. Family gibt den Namen der Schriftart an wie Arial oder Times new roman, weight steht für die Stärke (bold [=fett] oder normal) und style für den Stil (italic [=kursiv] oder normal).
Bei Schriften mit mehreren Wörtern werden die Leerzeichen durch Unterstriche ( _ ) ersetzt.
Hier ein korrektes Beispiel: optimer-normal-normal.js
Die Schriftarten-Dateien müssen nicht explizit eingebunden werden. Dies geschieht per Ajax zur Laufzeit.
Die browsereigenen canvas.text-Umsetzungen lassen sich per Schalter deaktivieren. Dafür ist folgender Aufruf geeignet:
<script type="text/javascript" src="canvas.text.js?reimplement=true" />
Auf der Projektseite von canvas.text finden sich 5 Live-Demos, die die Möglichkeiten aufzeigen. Ein Blick in den Quellcode zeigt auch einige Kniffe zur Umsetzung.
Zu guter letzt noch ein Codeschnipsel, wie man in Canvas dann damit umgeht:
canvas.font = "20px 'optimer'";
canvas.strokeStyle = "rgb(0,0,200)";
canvas.textAlign = 'left';
canvas.textBaseline = 'middle';
canvas.fillText('Ein normaler Beispieltext ...', 150, 100);
canvas.font = "bold 25px 'optimer'";
canvas.strokeText('... und noch ein fetter Beispieltext', 150, 200);
