Grafiken dynamisch erzeugen in HTML5 Canvas kurz & gut O’REILLY David Flanagan Übersetzung von Lars Schulten Canvas kurz & gut David Flanagan Deutsche Übersetzung von Lars Schulten Beijing Á Cambridge Á Farnham Á Köln Á Sebastopol Á Tokyo Die Informationen in diesem Buch wurden mit größter Sorgfalt erarbeitet Dennoch können Fehler nicht vollständig ausgeschlossen werden Verlag, Autoren und Übersetzer übernehmen keine juristische Verantwortung oder irgendeine Haftung für eventuell verbliebene Fehler und deren Folgen Alle Warennamen werden ohne Gewährleistung der freien Verwendbarkeit benutzt und sind möglicherweise eingetragene Warenzeichen Der Verlag richtet sich im Wesentlichen nach den Schreibweisen der Hersteller Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen Kommentare und Fragen können Sie gerne an uns richten: O’Reilly Verlag GmbH & Co KG Balthasarstr 81 50670 Köln E-Mail: kommentar@oreilly.de Copyright der deutschen Ausgabe:  2011 O’Reilly Verlag GmbH & Co KG Auflage 2011 Die Originalausgabe erschien 2010 unter dem Titel Canvas Pocket Reference bei O'Reilly Media, Inc Bibliografische Information Der Deutschen Nationalbibliothek Die Deutsche Nationalbibliothek verzeichnet diese Publikation in der Deutschen Nationalbibliografie; detaillierte bibliografische Daten sind im Internet über http://dnb.d-nb.de abrufbar Übersetzung und deutsche Bearbeitung: Lars Schulten Lektorat: Inken Kiupel Korrektorat: Sibylle Feldmann Produktion: Karin Driesen Umschlaggestaltung: Karen Montgomery und Michael Oreal Satz: Reemers Publishing Services GmbH, Krefeld, www.reemers.de, Druck: fgb freiburger graphische betriebe; www.fgb.de ISBN: 978-3-89721-597-9 Dieses Buch ist auf 100% chlorfrei gebleichtem Papier gedruckt Inhalt Vorwort VII Canvas-Tutorial Linien zeichnen und Polygone füllen Grafikattribute Canvas-Dimensionen und -Koordinaten Koordinatensystemtransformationen Kurven zeichnen und füllen Rechtecke Farben, Transparenz, Verläufe und Muster Strichattribute Text Clipping Schatten Bilder Compositing Pixelmanipulation Treffererkennung Canvas-Beispiel: Sparklines 10 13 15 22 25 26 31 33 35 37 40 43 48 50 52 Canvas-Referenz 55 Index 103 | III Vorwort Dieses Buch dokumentiert die JavaScript-API zum Zeichnen von Grafiken in ein HTML--Tag Es setzt voraus, dass Sie die Programmiersprache JavaScript kennen und zumindest grundlegend mit dem Einsatz von JavaScript in Webseiten vertraut sind Kapitel ist eine Einführung, die alle CanvasFunktionen erklärt und anhand von Beispielen illustriert Kapitel beinhaltet eine Referenz zu den Canvas-bezogenen Klassen, Methoden und Eigenschaften Dieses Buch ist ein Auszug aus dem erheblich umfangreicheren Buch JavaScript: Das umfassende Handbuch; mein Verlag und ich waren der Meinung, dass das -Tag eine so spannende HTML5-Komponente ist, dass es ein kompaktes eigenes Buch verdient Da die Canvas-API recht überschaubar ist, kann sie in diesem kurzen Buch vollständig beschrieben werden Mein Dank gilt Raffaele Cecco, der das Buch und die Codebeispiele sorgfältig durchgesehen hat Außerdem danke ich meinem Lektor, Mike Loukides, für seine Begeisterung für dieses Projekt, und Simon St Laurent, der das Material vom Format für das »Umfassende Handbuch« in das »kurz & gut«-Format überführt hat Die Beispiele in diesem Buch können von der Webseite zum Buch heruntergeladen werden, auf der auch eventuelle Fehler aufgeführt werden, sollten solche nach Veröffentlichung des Buches entdeckt werden: http://www.oreilly.de/catalog/canvasprger | V KAPITEL Canvas-Tutorial Dieses Buch erläutert, wie man mit JavaScript und dem HTML--Tag Grafiken in Webseiten zeichnet Die Möglichkeit, komplexe Grafiken dynamisch im Webbrowser zu generieren, statt sie von einem Server herunterzuladen, stellt eine Revolution dar: • Der Code, der auf Clientseite zur Erstellung der Grafiken genutzt wird, ist normalerweise erheblich kleiner als die Bilder selbst und spart damit eine Menge Bandbreite • Dass Aufgaben vom Server auf den Client verlagert werden, reduziert die Last auf dem Server und kann die Ausgaben für Hardware um einiges mindern • Die clientseitige Grafikgenerierung fügt sich gut in die Architektur von Ajax-Anwendungen ein, in denen der Server die Daten stellt und sich der Client um die Darstellung dieser Daten kümmert • Der Client kann Grafiken schnell und dynamisch neu zeichnen Das ermöglicht grafikintensive Anwendungen (wie Spiele und Simulationen), die schlicht nicht machbar sind, wenn jeder Frame einzeln von einem Server heruntergeladen werden muss • Das Schreiben von Grafikprogrammen ist ein Vergnügen, und das -Tag lindert für den Webentwickler die Pein, die die Arbeit mit dem DOM mit sich bringen kann | Das -Tag tritt nicht an sich in Erscheinung, sondern es erstellt eine Zeichenfläche im Dokument und bietet clientseitigem JavaScript eine mächtige API zum Zeichnen Das -Tag wird von HTML5 standardisiert, treibt sich aber schon deutlich länger herum Es wurde von Apple in Safari 1.3 eingeführt und wird von Firefox seit Version 1.5 und Opera seit Version unterstützt Außerdem wird es von allen Versionen von Chrome unterstützt Vom Internet Explorer wird es erst ab Version unterstützt, kann in IE 6, und aber hinreichend gut emuliert werden Canvas im IE Wenn Sie das -Tag im Internet Explorer 6, oder einsetzen wollen, können Sie das Open Source-Projekt ExplorerCanvas unter http://code.google.com/p/explorercanvas/ herunterladen Entpacken Sie das Archiv und fügen Sie das excanvas-Skript im Ihrer Webseiten mit einem bedingten Kommentar (Conditional Comment) für den Internet Explorer in folgender Form ein: Stehen diese Zeilen am Anfang Ihrer Webseiten, funktionieren -Tag und elementare Canvas-Zeichenbefehle im IE Radiale Verläufe und Clipping werden nicht unterstützt Die Linienbreite wird nicht korrekt skaliert, wenn die x- und y-Dimensionen um unterschiedliche Beträge skaliert werden Zusätzlich müssen Sie damit rechnen, beim IE weitere Rendering-Unterschiede zu sehen Große Teile der Canvas-Zeichen-API werden nicht im -Element selbst definiert, sondern auf einem »Zeichenkontext-Objekt«, das Sie sich mit der getContext()-Methode des Canvas beschaffen Rufen Sie getContext() mit dem Argument 2d auf, erhalten Sie ein CanvasRenderingContext2D-Objekt, über das Sie zweidimensionale Grafiken in das Canvas zeichnen können Es ist wichtig, sich darüber | Kapitel 1: Canvas-Tutorial ImageData-Objekts übersteigt, wird das Rechteck an diesen Punkten abgeschnitten Für sx und sy sind negative Werte zulässig Beschreibung putImageData() kopiert einen rechteckigen Block von Pixeln aus einem ImageData-Objekt auf das Canvas Das ist eine Pixeloperation auf niedriger Ebene: Die Attribute globalCompositeOperation und globalAlpha werden ignoriert, ebenso der Clipping-Bereich, die Transformationsmatrix und die Attribut für die Zeichnung von Schatten Eine Einsatzmöglichkeit für ImageData-Objekte ist ihre Verwendung als »Hintergrundspeicher« für ein Canvas – speichern Sie eine Kopie des Canvas in einem ImageData-Objekt (mit getImageData()), können Sie vorübergehend auf das Canvas zeichnen und es dann mit putImageData() wiederherstellen Siehe auch CRC.createImageData(), CRC.getImageData(), ImageData CRC.quadraticCurveTo() fügt dem Pfad eine quadratische Bézierkurve hinzu Überblick void quadraticCurveTo(float cpX, float cpY, float x, float y) Argumente cpX, cpY Die Koordinaten des Kontrollpunkts x, y Die Koordinaten des Endpunkts der Kurve Beschreibung Diese Methode fügt dem aktuellen Teilpfad eine quadratische Bézierkurve hinzu Die Kurve beginnt beim aktuellen Punkt und endet bei (x,y) Der Kontrollpunkt (cpX, cpY) definiert die Gestalt 92 | Kapitel 2: Canvas-Referenz der Kurve zwischen diesen beiden Punkten (Die mathematischen Grundlagen von Bézierkurven gehen allerdings über den Horizont dieses Buchs hinaus.) Wenn diese Methode zurückkehrt, ist der aktuelle Punkt (x,y) Siehe auch CRC.bezierCurveTo() CRC.rect() fügt dem Pfad einen rechteckigen Teilpfad hinzu Überblick void rect(float x, float y, float width, float height) Argumente x, y Die Koordinaten der linken oberen Ecke des Rechtecks width, height Die Maße des Rechtecks Beschreibung Diese Methode fügt dem Pfad ein Rechteck hinzu Dieses Rechteck bildet einen eigenen Teilpfad und ist mit keinem der anderen Teilpfade des Pfads verbunden Kehrt diese Methode zurück, ist die aktuelle Position (x,y) Ein Aufruf dieser Methode entspricht der folgenden Folge von Methodenaufrufen: c.moveTo(x,y); c.lineTo(x+w, y); c.lineTo(x+w, y+h); c.lineTo(x, y+h); c.closePath(); Siehe auch CRC.fillRect(), CRC.strokeRect() Canvas-Referenz | 93 CRC.restore() setzt den Zeichenzustand auf gespeicherte Werte zurück Überblick void restore() Beschreibung Diese Methode ruft den obersten Grafikzustand vom Stapel der gespeicherten Grafikzustände ab und stellt die Werte der CRCEigenschaften, den Clipping-Bereich und die Transformationsmatrix wieder her Weitere Informationen finden Sie bei der Methode save() Siehe auch CRC.save() CRC.rotate() fügt der aktuellen Transformation eine Rotation hinzu Überblick void rotate(float angle) Argumente angle Die Drehung in Radiant Positive Werte bewirken eine Drehung im Uhrzeigersinn, negative eine Drehung entgegen dem Uhrzeigersinn Beschreibung Diese Methode ändert die aktuelle Transformationsmatrix so, dass alle nachfolgenden Zeichnungen um den angegebenen Winkel gedreht im Canvas erscheinen Das -Element selbst wird nicht gedreht Beachten Sie, dass der Winkel in Radiant angegeben wird Grad wandeln Sie in Radiant um, indem Sie den Wert mit Math.PI multiplizieren und durch 180 dividieren Siehe auch CRC.scale(), CRC.translate() 94 | Kapitel 2: Canvas-Referenz CRC.save() speichert eine Kopie des aktuellen Grafikzustands Überblick void save() Beschreibung save() schiebt eine Kopie des aktuellen Grafikzustands auf den Stapel gespeicherter Grafikzustände Das ermöglicht Ihnen, den Grafikzustand vorübergehend zu ändern, um dann mit einem Aufruf von restore() den ursprünglichen Grafikzustand wiederherzustellen Zum Grafikzustand zählen alle Eigenschaften des CRC-Objekts (außer der schreibgeschützten Eigenschaft canvas) Er schließt auch die Transformationsmatrix ein, die aus den Aufrufen von rotate(), scale() und translate() resultiert Zusätzlich schließt er den Ausschnitt ein, der mit der Methode clip() definiert wird Beachten Sie allerdings, dass der aktuelle Pfad und die aktuelle Position nicht Teil des Grafikzustands sind und von dieser Methode nicht gespeichert werden Siehe auch CRC.restore() CRC.scale() fügt der aktuellen Transformation eine Skalierungsoperation hinzu Überblick void scale(float sx, float sy) Argumente sx, sy Die horizontalen und vertikalen Skalierungsfaktoren Beschreibung scale() fügt der aktuellen Transformationsmatrix des Canvas eine Skalierungstransformation hinzu Die Skalierung erfolgt mit unabhängigen horizontalen und vertikalen Skalierungsfaktoren Übergeben Sie die Werte 2.0 und 0.5, führt das beispielsweise dazu, dass Pfade doppelt so breit und halb so hoch gezeichnet werden, als sie Canvas-Referenz | 95 ansonsten gezeichnet worden wären Ein negativer Wert für sx bewirkt, dass x-Koordinaten über die y-Achse gespiegelt werden, und negative Werte für sy bewirken, dass y-Koordinaten über die x-Achse gespiegelt werden Siehe auch CRC.rotate(), CRC.translate() CRC.setTransform() setzt die aktuelle Transformationsmatrix Überblick void setTransform(float a, float b, float c, float d, float e, float f) Argumente a,b,c,d,e,f Sechs Elemente einer affinen 3-×-3-Transformationsmatrix Beschreibung Mit dieser Methode können Sie die aktuelle Transformationsmatrix direkt setzen statt über eine Folge von Aufrufen von translate(), scale() und rotate() Nach Aufruf dieser Methode ist dies die neue Transformationsmatrix: x' a c e x y' = b d f × y 0 1 = = ax + cy + e bx + dy + f Beispiel Mit folgendem Code können Sie die Transformation eines Kontexts c auf die Identitätstransformation zurücksetzen, um wieder mit rohen Canvas-Koordinaten zu arbeiten: c.save(); // Die aktuelle Transforma// tion speichern c.setTransform(1,0,0,1,0,0); // Identita¨tstransformation // setzen /* Hier mit rohen Canvas-Koordinaten arbeiten */ c.restore(); // Zur alten Transformation // zuru¨ckkehren 96 | Kapitel 2: Canvas-Referenz Siehe auch CRC.rotate(), CRC.scale(), CRC.transform(), CRC.translate() CRC.stroke() zeichnet den aktuellen Pfad Überblick void stroke() Beschreibung Die Methode stroke() zieht den Umriss des aktuellen Pfads Der Pfad definiert die Geometrie der erzeugten Linie, aber das äußere Erscheinungsbild des Strichs hängt von den Eigenschaften strokeStyle, lineWidth, lineCap, lineJoin und miterLimit ab Der Begriff stroke (Strich) verweist auf einen Stift- oder Pinselstrich Er sagt: »Zeichne den Umriss von.« Das Gegenstück zu stroke() ist fill() Diese Methode füllt das Innere des Pfads, statt den Umriss des Pfads zu ziehen Siehe auch CRC.fill(), CRC.lineCap, CRC.lineJoin, CRC.strokeRect() CRC.strokeRect() zeichnet ein Rechteck Überblick void strokeRect(float x, float y, float width, float height) Argumente x, y Die Koordinaten der linken oberen Ecke des Rechtecks width, height Die Maße des Rechtecks Beschreibung Diese Methode zeichnet den Umriss eines Rechtecks an der angegebenen Position und mit der angegebenen Größe (füllt sein Inneres aber nicht) Strichfarbe und -breite werden durch die Eigen- Canvas-Referenz | 97 schaften strokeStyle und lineWidth vorgegeben Wie die Ecken des Rechtecks aussehen, wird durch die Eigenschaft lineJoin bestimmt Anders als rect() wirkt sich strokeRect() nicht auf den aktuellen Pfad oder den aktuellen Punkt aus Siehe auch CRC.fillRect(), CRC.lineJoin, CRC.rect(), CRC.stroke() CRC.strokeText() zeichnet den Umriss eines Texts Überblick void strokeText(String text, float x, float y,float max) Argumente text Der in das Canvas zu zeichnende Text x, y Der »Ankerpunkt« des Texts im Canvas max Eine optionale Maximalbreite für den Text Beschreibung strokeText() funktioniert wie fillText(), füllt die einzelnen Schriftzeichen aber nicht mit fillStyle, sondern zieht den Umriss aller Schriftzeichen mit strokeStyle strokeText() führt zu interes- santen grafischen Effekten, wenn mit großer Schriftgröße gearbeitet wird Zum Zeichnen von Text wird üblicherweise jedoch eher fillText() verwendet Siehe auch CRC.fillText() 98 | Kapitel 2: Canvas-Referenz CRC.transform() führt eine beliebige Transformation aus Überblick void transform(float a, float b, float c, float d, float e, float f) Argumente a,b,c,d,e,f Sechs Elemente einer affinen 3-×-3-Transformationsmatrix Beschreibung Die Argumente dieser Methode geben die sechs nicht trivialen Elemente einer affinen 3-×-3-Transformationsmatrix T an: a c e b d f 0 transform() setzt die aktuelle Transformationsmatrix auf das Produkt der Transformationsmatrix und T: CTM' = CTM × T Translationen, Skalierung und Rotationen können mit dieser allgemeineren transform()-Methode durchgeführt werden Rufen Sie für eine Translation transform(1,0,0,1,dx,dy) auf, für eine Skalierung transform(sx,0,0,sy,0,0) Eine Drehung im Uhrzeigersinn um den Ursprung um einen Winkel x erreichen Sie mit: transform(cos(x),sin(x),-sin(x), cos(x), 0, 0) Eine Scherung um den Faktor k parallel zur x-Achse erreichen Sie mit transform(1,0,k,1,0,0), eine Scherung parallel zur y-Achse mit transform(1,k,0,1,0,0) Beispiel // Eine Scherung durchfu¨hren function shear(c,kx,ky) { c.transform(1,ky,kx,1,0,0); } // Im Uhrzeigersinn theta Rad um den Punkt (x,y) drehen function rotateAbout(c, theta, x, y) { var ct = Math.cos(theta); var st = Math.sin(theta); Canvas-Referenz | 99 c.transform(ct, -st, st, ct, -x*ct - y*st + x, x*st - y*ct + y); } Siehe auch CRC.rotate(), CRC.scale(), CRC.setTransform(), CRC.translate() CRC.translate() fügt der aktuellen Transformation eine Translation hinzu Überblick void translate(float dx, float dy) Argumente dx, dy Der Betrag, um den die x- und y-Maße verschoben werden sollen Beschreibung translate() fügt der Transformationsmatrix des Canvas eine horizontale und ein vertikale Verschiebung hinzu Die Argumente dx und dy werden allen Punkten in nachfolgend definierten Pfaden hinzugefügt Siehe auch CRC.rotate(), CRC.scale() ImageData ein Array mit Pixeldaten für ein Bild Eigenschaften data Eine schreibgeschützte Referenz auf ein Array-artiges Objekt, das die Bilddaten enthält height Die Anzahl von Zeilen an Bilddaten width Die Anzahl an Pixeln pro Datenzeile 100 | Kapitel 2: Canvas-Referenz Beschreibung Ein ImageData-Objekt hält die Rot-, Grün-, Blau- und Alphakomponenten eines rechteckigen Pixelbereichs Ein ImageData-Objekt verschaffen Sie sich mit den createImageData()- oder getImageData()-Methoden des CanvasRenderingContext2D-Objekts eines -Tags Die Eigenschaften width und height geben die Maße des Pixelrechtecks an Die Eigenschaft data ist ein Array mit den Pixeldaten Pixel erscheinen im Array data[] von links nach rechts und von oben nach unten Jedes Pixel besteht aus vier Bytewerten, die die R-, G-, B- und A-Komponenten in dieser Reihenfolge angeben Die Farbkomponenten für ein Pixel bei (x,y) in einem ImageData-Objekt image erhalten Sie also folgendermaßen: var var var var var offset = (x + y*image.width) * 4; red = image.data[offset]; green = image.data[offset+1]; blue = image.data[offset+2]; alpha = image.data[offset+3]; Das Array data[] ist kein echtes JavaScript-Array, sondern ein Array-artiges Objekt, das als CanvasPixelArray-Objekt bezeichnet wird (CanvasPixelArray wird hier dokumentiert und hat keinen eigenen Eintrag in diesem Referenzabschnitt.) Ein CanvasPixelArray ist ein optimiertes Byte-Array Die Elemente dieses Arrays müssen ganze Zahlen zwischen und 255 sein Die Elemente sind les- und schreibbar, aber die Länge des Arrays ist unveränderlich Bei jedem ImageData-Objekt i ist i.data.length immer gleich i.width * i.height * Siehe auch CRC, CRC.getImageData() TextMetrics Maße einer Textsequenz Eigenschaften width Die Breite des angegebenen Texts Canvas-Referenz | 101 Beschreibung Ein TextMetrics-Objekt wird von der measureText()-Methode des CanvasRenderingContext2D geliefert Seine width-Eigenschaft gibt die Breite des vermessenen Texts in CSS-Pixeln an Siehe auch CRC.measureText() 102 | Kapitel 2: Canvas-Referenz Index Symbole 3-D-Grafiken A addColorStop( ) 30, 59 affine Transformationen 18 arc( ) 4, 22, 70 arcTo( ) 22, 71 B beginPath( ) 4, 6, 8, 73 bezierCurveTo( ) 23, 73 Bilder 40 zeichnen 68 C c-Variable Canvas-Maße 13 Canvas-Objekt 55 -Tag 1, 56 Internet Explorer, Einsatz in CanvasGradient-Objekt 59 CanvasPattern-Objekt 60 CanvasRenderingContext2D-Objekt 2, 57, 70 Eigenschaften 60 Methoden 63, 65 clearRect( ) 25, 74 clip( ) 35, 74 Clipping 35 closePath( ) 7, 75 Compositing 43, 69 Inkompatibilitäten 46 lokal vs global 47 copy-Compositing 44 CRC siehe CanvasRenderingContext2D-Objekt createImageData( ) 48, 75 createLinearGradient( ) 29, 76 createPattern( ) 28, 77 createRadialGradient( ) 29, 78 CSS-Farbstring 26 CSS-Pixel 14 D destination-over-Compositing 44 drawImage( ) 40, 79 Canvas, kopieren mit 43 E ExplorerCanvas-Projekt F Farben, Verläufe und Muster 67 Farbnamen, HTML4-Standard 26 Farbräume, von CSS3 unterstützte 26 fill( ) 4, 6–7, 80 fillRect( ) 25, 81 fillStyle-Eigenschaft 26 fillText( ) 33, 82 Index | 103 G M getContext( ) 2, 11, 56–57 getImageData( ) 48, 83 Sicherheitsbeschränkungen 50 globalAlpha-Eigenschaft 27 globalCompositeOperation-Eigenschaft 44, 84 Grafikattribute 10, 13 Grafikzustand speichern 70 Grafikzustand, Werkzeuge zur Verwaltung 12 measureText( ) 89 Methoden zur Hinzufügung und Verbindung von Punkten 22 miterLimit-Eigenschaft 33, 90 MouseEvent-Umwandlung 50 moveTo( ) 6, 91 Muster- und Verlaufsfüllungen 28 N Nonzero Winding-Regel 10 H HSL-Farbraum 27 I ImageData-Objekt 100 isPointInPath( ) 50, 86 J JavaScript V K Koch-Schneeflocken 19 Kontext-Objekt Koordinatensystem 13 -transformationen siehe Transformationen Koordinatensystem und Transformationen 69 Kurven zeichnen und füllen 22, 25 P Pfad 4, 6, 22 erstellen und zeichnen 66 offene und geschlossene Teilpfade Pixel siehe CSS-Pixel Pixelmanipulationsmethoden 48, 70 Polygone putImageData( ) 48, 91 Q quadraticCurveTo( ) 23, 92 R Rechtecke zeichnen 25, 68 rect( ) 25, 93 restore( ) 12, 94 rotate( ) 16–17, 94 L S lineCap-Eigenschaft 32, 87 lineJoin-Eigenschaft 33, 88 lineTo( ) 6, 89 lineWidth-Eigenschaft 31 save( ) 12, 95 scale( ) 16–17, 95 Schatten 37, 69 setTransform( ) 15, 19, 96 shadowBlur-Eigenschaft 39 104 | Index shadowColor-Eigenschaft 38 shadowOffsetX- und shadowOffsetY-Eigenschaften 38 source-over-Compositing 44 Sparklines 52, 54 Strichbreite, Strichende und Strichverbindungen 68 stroke( ) 6–7, 31, 97 strokeRect( ) 25, 97 strokeStyle-Eigenschaft 26 strokeText( ) 33, 98 mathematische Erläuterung 17, 19 Reihenfolge von 17 translate( ) 16–17, 100 Transparenz 26 Compositing-Operationen und 44 mit globalem Alpha 27 Treffererkennung 50 Tufte, Edward 52 V T Teilpfade offene und geschlossene Text 33, 68 textAlign- und textBaseline-Eigenschaften 34 TextMetrics-Objekt 101 toDataURL( ) 42, 56–57 transform( ) 18, 99 Transformationen 15, 20 Beispiel 19 Koordinatensystem und 69 Verlaufsfüllung 28 W webgl (String) WebGL-API weiche Transparenz, Compositing-Operationen 44 width- und height-Eigenschaften 55 Z Zeichenkontext Index | 105 106 | Index