Das <canvas>-Element ist ein Objekt, dass mit Eigenschaften und Methoden ausgestattet ist. In den nachfolgenden Kapiteln sollen diese vorgestellt und beschrieben werden.
scale
- (Methode) Skaliert den Inhalt des Kontexteswidth
- (Attribut) Breite des Canvas-Elementsheight
- (Attribut) Höhe des Canvas-ElementsgetContext
- (Methode) erstellt einen KontexttoDataURL
- (Methode) liefert einen data:-URL, der das Bild repräsentiertMittels dieser Eigenschaft kann die Breite des Elements definiert oder gelesen werden.
Mittels dieser Eigenschaft kann die Höhe des Elements definiert oder gelesen werden.
Die Methode
getContext
refernziert das CanvasRenderingContext2D
-Objekt, über das viele weitere Attribute und Methoden zur
Verfügung gestellt werden.
Die Methode liefert einen Base64-kodierten data:
-URL-String zurück,
der das Bild im <canvas>-Element repräsentiert.
Enthält der Canvas keine Pixel (z.B. eine der Dimensionen ist Null), muss die Methode
die Zeichenkette "data:,
" zurückgeben. Hierbei handelt es sich um den kürzesten
data:
-URL, der einen leeren String in einer text/plain-Ressource darstellt.
Die Methode kann auf zwei unterschiedliche Varianten aufgerufen werden.
string toDataURL();
Ohne Parameter erstellt die Methode aus dem <canvas>-Element ein PNG-Bild.
string toDataURL(type, [args]);
Dieser Parameter erwartet einen String, der das Format des zurückgegebenen data:
-URL-Strings
vorgibt. Mögliche Werte sind MIME-Typen ohne Parameter - zum Beispiel image/png
,
image/jgeg
oder image/svg+xml
. Es ist jedoch zu beachten, dass nicht
alle Typen von allen Browsern unterstützt werden.
Vorgeschrieben ist für die Browser lediglich die Unterstützung des PNG-Formats. Wird ein Format angegeben, das durch den Browser nicht unterstützt wird, muss ein PNG zurückgegeben werden.
Weitere Argumente, die optional übergeben werden können. Siehe hierzu die Referenzen der jeweiligen Browserhersteller.