canvas.text für jeden Browser

<p>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.</p>


<p>Methoden zum Darstellen von Text sind in den (vorläufigen) <a class="previewlink" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#text">Spezifikationen des Canvas-Elementes</a> bereits vorgesehen.</p>


<p>Aktuelle Versionen von Webkit, Safari4 (Beta), Chrome 2 (Beta) und <a class="previewlink" href="https://developer.mozilla.org/En/Firefox_3.5_for_developers#New_Canvas_features">Firefox 3.5</a> (Beta) implementieren die Canvas-Text-Methoden, doch für die breite Masse eingesetzter Browser gilt dies nicht.</p>


<p>Die Lösung liefert ein Javascript-Bibliothek mit dem einfachen und treffenden Namen <a class="previewlink" href="http://code.google.com/p/canvas-text/">canvas-text.</a></p>


<p>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).</p>


<p>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 <a href="http://www.ajaxschmiede.de/javascript/explorercanvas-erfaehrt-ie8-update/">ExCanvas</a>-Bibliothek für den Internet Explorer und der canvas.text.js-Datei werden keine anderen Dateien benötigt.</p>


<p>Vorhandene browser-spezifische Implementierungen werden nicht überschrieben, es sei denn, man gibt dies explizit an.</p>


<p>Der Einbau sieht wie folgt aus:</p>



&lt;!--[if IE]&gt;&lt;script type=&quot;text/javascript&quot; src=&quot;excanvas.js&quot; /&gt;&lt;![endif]--&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;canvas.text.js&quot; /&gt;

<p>Um canvas.text auch zu nutzen,benötigt man nun noch Schriftarten. <a class="previewlink" href="http://typeface.neocracy.org/fonts.html">Typeface.js</a> bietet einige Font-Files an. Eine größere Auswahl gibt es bei <a class="previewlink" href="http://www.madasplayground.com/fonts/">Mada&#8217;s Playground</a>. 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.</p>


<p>Zudem gilt es zu beachten:</p>


<p>Der Dateiname canvas.text.js darf NICHT geändert werden!</p>


<p>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).</p>


<p>Bei Schriften mit mehreren Wörtern werden die Leerzeichen durch Unterstriche ( _ ) ersetzt.</p>


<p>Hier ein korrektes Beispiel: optimer-normal-normal.js</p>


<p>Die Schriftarten-Dateien müssen nicht explizit eingebunden werden. Dies geschieht per Ajax zur Laufzeit.</p>


<p>Die browsereigenen canvas.text-Umsetzungen lassen sich per Schalter deaktivieren. Dafür ist folgender Aufruf geeignet:</p>



&lt;script type=&quot;text/javascript&quot; src=&quot;canvas.text.js?reimplement=true&quot; /&gt;

<p>Auf der Projektseite von canvas.text finden sich 5 <a href="http://canvas-text.googlecode.com/svn/trunk/examples/index.html">Live-Demos</a>, die die Möglichkeiten aufzeigen. Ein Blick in den Quellcode zeigt auch einige Kniffe zur Umsetzung.</p>


<p>Zu guter letzt noch ein Codeschnipsel, wie man in Canvas dann damit umgeht:</p>



canvas.font = &quot;20px 'optimer'&quot;;
canvas.strokeStyle = &quot;rgb(0,0,200)&quot;;
canvas.textAlign = 'left';
canvas.textBaseline = 'middle';
canvas.fillText('Ein normaler Beispieltext ...', 150, 100);
canvas.font = &quot;bold 25px 'optimer'&quot;;
canvas.strokeText('... und noch ein fetter Beispieltext', 150, 200);