---
title: <canvas>
slug: Web/HTML/Element/canvas
translation_of: Web/HTML/Element/canvas
---
<h2 id="Übersicht">Übersicht</h2>
<p>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 <a class="external" href="http://www.selfhtml5.org/2010-html5-features/canvas-attribute-table/">Canvas Attribute</a>). Es sollte ein Fallbackinhalt in den <code>&lt;canvas&gt;Tag</code> eingefügt werden, welcher nur angezeigt wird, wenn Browser das <code>&lt;canvas&gt;</code> Element nicht unterstützt oder Javascript deaktiviert ist.</p>
<h2 id="Attribute">Attribute</h2>
<p><span style="line-height: 21px;">Dieses Element unterstützt die </span><a style="line-height: 21px;" title="HTML/Global attributes">globalen Attribute</a><span style="line-height: 21px;">.</span></p>
<dl>
 <dt>
  {{htmlattrdef("width")}}</dt>
 <dd>
  Die Breite in Pixel. Standard ist 300px.</dd>
 <dt>
  {{htmlattrdef("height")}}</dt>
 <dd>
  Die Höhe in Pixel. Standard ist 150px.</dd>
</dl>
<p>{{Note("Die Größe des <code>canvas</code> kann auch via CSS geändert werden. Das Bild wird hierzu gestreckt um die per CSS definierte Größe zu erreichen.")}}</p>
<h2 id="Beispiele">Beispiele</h2>
<pre class="brush: html">&lt;canvas id="canvas" width="300" height="300"&gt;
  Dein Browser unterstützt das &amp;lt;canvas&amp;gt; Element anscheinend nicht.
&lt;/canvas&gt;
</pre>
<h2 id="Specifications" name="Specifications">Spezifikationen</h2>
<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spezifikation</th>
   <th scope="col">Status</th>
   <th scope="col">Kommentar</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'the-canvas-element.html#the-canvas-element', '&lt;canvas&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'the-canvas-element.html#the-canvas-element', '&lt;canvas&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>
<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
 <table class="compat-table">
  <tbody>
   <tr>
    <th>Funktion</th>
    <th>Chrome</th>
    <th>Firefox (Gecko)</th>
    <th>Internet Explorer</th>
    <th>Opera</th>
    <th>Safari</th>
   </tr>
   <tr>
    <td>Basic support</td>
    <td>1.0</td>
    <td>{{CompatGeckoDesktop("1.8")}}</td>
    <td>9.0</td>
    <td><a href="http://www.opera.com/docs/changelogs/windows/900/">9.0</a></td>
    <td><a href="http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/HTML-canvas-guide/Introduction/Introduction.html">2.0</a></td>
   </tr>
  </tbody>
 </table>
</div>
<div id="compat-mobile">
 <table class="compat-table">
  <tbody>
   <tr>
    <th>Funktion</th>
    <th>Firefox Mobile (Gecko)</th>
    <th>Android</th>
    <th>IE Mobile</th>
    <th>Opera Mobile</th>
    <th>Safari Mobile</th>
   </tr>
   <tr>
    <td>Basic support</td>
    <td>{{CompatGeckoMobile("1.8")}}</td>
    <td>{{CompatUnknown}}</td>
    <td>{{CompatUnknown}}</td>
    <td>{{CompatUnknown}}</td>
    <td>1.0</td>
   </tr>
  </tbody>
 </table>
</div>
<h3 id="Browserspezifische_Hinweise">Browserspezifische Hinweise</h3>
<h4 id="Firefox_(Gecko)">Firefox (Gecko)</h4>
<ul>
 <li>Before Gecko 5.0 {{geckoRelease("5.0")}}, the canvas width and height were signed integers instead of unsigned integers.</li>
 <li>Prior to Gecko 6.0 {{geckoRelease("6.0")}}, a {{HTMLElement("canvas")}} element with a zero width or height would be rendered as if it had default dimensions.</li>
 <li>Before Gecko 12.0 {{geckoRelease("12.0")}}, if JavaScript is disabled, the <code>&lt;canvas&gt;</code> element was being rendered instead of showing the fallback content as per the <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html">specification</a>. Now the fallback content is rendered instead.</li>
</ul>
<h2 id="See_also">See also</h2>
<ul>
 <li><a href="/en-US/docs/HTML/Canvas" title="https://developer.mozilla.org/en-US/docs/HTML/Canvas">MDN canvas portal</a></li>
 <li>A <a href="/en-US/docs/Canvas_tutorial" title="Canvas tutorial">canvas tutorial</a></li>
 <li><a href="http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html">Canvas cheat sheet</a></li>
 <li><a href="/en-US/demos/tag/tech:canvas" title="demos/tag/tech:canvas/">Canvas-related demos</a></li>
</ul>
<div>
 {{HTMLRef}}</div>
<p style="margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; text-indent: 0px;"><span style="font-family: 'Ubuntu'; font-size: 9pt; color: #000000;">{{ languages( { "de": "de/HTML/Element/canvas", "en": "en/HTML/Element/canvas", "es": "es/HTML/Elemento/canvas", "ja": "ja/HTML/Element/canvas", "ko": "ko/HTML/Element/canvas", "nl": "nl/HTML/HTML_Tags/canvas", "pl": "pl/HTML/Element/canvas", "ru": "Ru/HTML/Element/canvas", "zh-cn": "cn/HTML/Element/canvas", "fr": "fr/HTML/Element/canvas" } ) }}</span></p>