<canvas>

Übersicht

Das Canvas Element ist ein großer Fortschritt in der Entwicklung des HTML, bietet es doch die Möglichkeit zur dynamischen Darstellung grafischer Informationen. Dazu wird eine Canvas (engl. Leinwand) definiert und mittels JavaScript verschiedene Methoden zur Anwendung gebracht und Attribute gesetzt (siehe Canvas Attribute). Es sollte ein Fallbackinhalt in den <canvas>Tag eingefügt werden, welcher nur angezeigt wird, wenn Browser das <canvas> Element nicht unterstützt oder Javascript deaktiviert ist.

Attribute

Dieses Element unterstützt die globalen Attribute.

width
Die Breite in Pixel. Standard ist 300px.
height
Die Höhe in Pixel. Standard ist 150px.

Hinweis: Die Größe des canvas kann auch via CSS geändert werden. Das Bild wird hierzu gestreckt um die per CSS definierte Größe zu erreichen.

Beispiele

<canvas id="canvas" width="300" height="300">
  Dein Browser unterstützt das &lt;canvas&gt; Element anscheinend nicht.
</canvas>

Spezifikationen

Spezifikation Status Kommentar
HTML Living Standard
Die Definition von '<canvas>' in dieser Spezifikation.		 Lebender Standard  
HTML5
Die Definition von '<canvas>' in dieser Spezifikation.		 Empfehlung  

Browserkompatibilität

Wir konvertieren die Kompatibilitätsdaten in ein maschinenlesbares JSON Format. Diese Kompatibilitätstabelle liegt noch im alten Format vor, denn die darin enthaltenen Daten wurden noch nicht konvertiert. Finde heraus wie du helfen kannst!

Funktion Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 1.5 (1.8) 9.0 9.0 2.0
Funktion Firefox Mobile (Gecko) Android IE Mobile Opera Mobile Safari Mobile
Basic support 1.0 (1.8) ? ? ? 1.0

Browserspezifische Hinweise

Firefox (Gecko)

  • Before Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2), the canvas width and height were signed integers instead of unsigned integers.
  • Prior to Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3), a <canvas> element with a zero width or height would be rendered as if it had default dimensions.
  • Before Gecko 12.0 (Firefox 12.0 / Thunderbird 12.0 / SeaMonkey 2.9), if JavaScript is disabled, the <canvas> element was being rendered instead of showing the fallback content as per the specification. Now the fallback content is rendered instead.

See also