---
title: CanvasRenderingContext2D
slug: Web/API/CanvasRenderingContext2D
tags:
  - API
  - Canvas
  - CanvasRenderingContext2D
  - Graphics
  - Image
  - Shape
translation_of: Web/API/CanvasRenderingContext2D
---
<div>{{APIRef}}</div>

<p>Das <code><strong>CanvasRenderingContext2D</strong></code>-Interface stellt den 2D-Renderkontext für die Zeichenoberfläche eines {{ HTMLElement("canvas") }} zur Verfügung. Es wird zum Zeichnen von Formen, Text, Bildern und anderen Objekten benutzt.</p>

<p>Eigenschaften und Methoden finden Sie in der Sidebar und weiter unten. Das <a href="/en-US/docs/Web/API/Canvas_API/Tutorial" title="Canvas tutorial">Canvas-Tutorial</a> bietet Ihnen außerdem weitere Informationen, Beispiele und Ressourcen.</p>

<h2 id="Ein_einfaches_Beispiel">Ein einfaches Beispiel</h2>

<p>Um eine <code>CanvasRenderingContext2D</code> Instanz zu erhalten, muss man erst ein  HTML <code>&lt;canvas&gt;</code> Element haben, mit dem man arbeiten kann:</p>

<pre class="brush: html">&lt;canvas id="my-house" width="300" height="300"&gt;&lt;/canvas&gt;</pre>

<p>Um ein Objekt dieses Interfaces zu erhalten, benutzen Sie die Methode {{domxref("HTMLCanvasElement.getContext()", "getContext()")}} eines <code>&lt;canvas&gt;</code>, mit "2d" als Argument:</p>

<pre class="brush: js">const canvas = document.getElementById('my-house');
const ctx = canvas.getContext('2d');
</pre>

<p>Sobald Sie den Kontext der Zeichenoberfläche haben, können Sie darin zeichnen, was immer Sie möchten. Dieser Code zeichnet ein Haus:</p>

<pre class="brush: js">// Die Lininestärke festlegen
ctx.lineWidth = 10;

// Wand
ctx.strokeRect(75, 140, 150, 110);

// Tür
ctx.fillRect(130, 190, 40, 60);

// Dach
ctx.moveTo(50, 140);
ctx.lineTo(150, 60);
ctx.lineTo(250, 140);
ctx.closePath();
ctx.stroke();
</pre>

<p>Die enstandene Zeichnung sieht so aus:</p>

<p>{{EmbedLiveSample("Basic_example", 700, 330)}}</p>

<h2 id="Referenz">Referenz</h2>

<h3 id="Rechtecke_zeichnen">Rechtecke zeichnen</h3>

<p>Es gibt drei Methoden, die sofort Rechtecke innerhalb des Canvas zu zeichnen.</p>

<dl>
 <dt>{{domxref("CanvasRenderingContext2D.clearRect()")}}</dt>
 <dd>Setzt alle Pixel im Rechteck mit Startpunkt <em>(x, y)</em> und Größe <em>(width, height)</em> auf schwarz und transparent wodurch jeglicher vorheriger Inhalt gelöscht wird.</dd>
 <dt>{{domxref("CanvasRenderingContext2D.fillRect()")}}</dt>
 <dd>Zeichnet ein gefülltes Rechteck mit Startpunkt <em>(x, y)</em> und Größe <em>(width, height)</em>.</dd>
 <dt>{{domxref("CanvasRenderingContext2D.strokeRect()")}}</dt>
 <dd>Zeichnet ein Rechteck mit Startpunkt <em>(x, y)</em> und Größe <em>(width, height),</em> verwendet dabei den aktuellem <em>stroke style</em>.</dd>
</dl>

<h3 id="Text_darstellen">Text darstellen</h3>

<p>Die folgenden Methoden zeichnen Text auf dem Canvas. Siehe auch das {{domxref("TextMetrics")}} - Objekt für die Texteigenschaften.</p>

<dl>
 <dt>{{domxref("CanvasRenderingContext2D.fillText()")}}</dt>
 <dd>Zeichnet einen gegebenen Text (gefüllt) an die gegebene Position <em>(x, y)</em>.</dd>
 <dt>{{domxref("CanvasRenderingContext2D.strokeText()")}}</dt>
 <dd>Zeichnet einen gegebenen Text (Umrisse) an die gegebene Position <em>(x, y)</em>.</dd>
 <dt>{{domxref("CanvasRenderingContext2D.measureText()")}}</dt>
 <dd>Gibt ein {{domxref("TextMetrics")}}-Objekt zurück.</dd>
</dl>

<h3 id="Linienstile">Linienstile</h3>

<p>Die folgenden Methoden und Eigenschaften beeinflussen die Art und Weise, wie Linien gezeichnet werden.</p>

<dl>
 <dt>{{domxref("CanvasRenderingContext2D.lineWidth")}}</dt>
 <dd>Linienbreite. Standard: <code>1.0</code></dd>
 <dt>{{domxref("CanvasRenderingContext2D.lineCap")}}</dt>
 <dd>Typ des Linienabschlusses. Mögliche Werte: <code>butt</code> (default), <code>round</code>, <code>square</code>.</dd>
 <dt>{{domxref("CanvasRenderingContext2D.lineJoin")}}</dt>
 <dd>Definiert den Typ der Ecken, wo sich zwei Linien treffen. Mögliche Werte: <code>round</code>, <code>bevel</code>, <code>miter</code> (default).</dd>
 <dt>{{domxref("CanvasRenderingContext2D.miterLimit")}}</dt>
 <dd>Verbindungsecken-Größe. Standard: <code>10</code>.</dd>
 <dt>{{domxref("CanvasRenderingContext2D.getLineDash()")}}</dt>
 <dd>Gibt das aktuelle Linienstrich-Array zurück, welches eine gerade Anzahl positiver Zahlen enthält.</dd>
 <dt>{{domxref("CanvasRenderingContext2D.setLineDash()")}}</dt>
 <dd>Setzt das aktuelle Linienstrich-Array auf einen neuen Wert.</dd>
 <dt>{{domxref("CanvasRenderingContext2D.lineDashOffset")}}</dt>
 <dd>Spezifiziert, wo auf einer Linie ein Strich-Array beginnt.</dd>
</dl>

<h3 id="Textstile">Textstile</h3>

<p>Die folgenden Eigenschaften bestimmen, wie Text dargestellt wird.</p>

<dl>
 <dt>{{domxref("CanvasRenderingContext2D.font")}}</dt>
 <dd>Font-Einstellung. Standard: <code>10px sans-serif</code></dd>
 <dt>{{domxref("CanvasRenderingContext2D.textAlign")}}</dt>
 <dd>Ausrichtungs-Einstellung. Mögliche Werte: <code>start</code> (default), <code>end</code>, <code>left</code>, <code>right</code> oder <code>center</code>.</dd>
 <dt>{{domxref("CanvasRenderingContext2D.textBaseline")}}</dt>
 <dd>Ausrichtungseinstellung zur Basislinie. Mögliche Werte: <code>top</code>, <code>hanging</code>, <code>middle</code>, <code>alphabetic</code> (default), <code>ideographic</code>, <code>bottom</code>.</dd>
 <dt>{{domxref("CanvasRenderingContext2D.direction")}}</dt>
 <dd>Direktionalität. Mögliche Werte: <code>ltr, rtl, </code><code>inherit</code> (default).</dd>
</dl>

<h3 id="Füll-_und_Linienfarbe">Füll- und Linienfarbe</h3>

<p>Die Füllfarbe (<code>fillStyle</code>) wird innerhalb von Formen angewendet, die Linienfarbe (<code>strokeStyle</code>) auf die Randlinie von Formen. Beides kann statt einer Farbe auch ein Farbverlauf oder ein Muster sein.</p>

<dl>
 <dt>{{domxref("CanvasRenderingContext2D.fillStyle")}}</dt>
 <dd>Farbe oder Stil für innerhalb von Formen. Standardwert <code>#000</code> (schwarz).</dd>
 <dt>{{domxref("CanvasRenderingContext2D.strokeStyle")}}</dt>
 <dd>Farbe oder Stil für die Randlinie von Formen. Standardwert <code>#000</code> (schwarz).</dd>
</dl>

<h3 id="Farbverläufe_und_Muster">Farbverläufe und Muster</h3>

<dl>
 <dt>{{domxref("CanvasRenderingContext2D.createLinearGradient()")}}</dt>
 <dd>Erzeugt einen linearen Farbverlauf entlang der Linie gegeben durch die Koordinaten, die als Parameter übergeben werden.</dd>
 <dt>{{domxref("CanvasRenderingContext2D.createRadialGradient()")}}</dt>
 <dd>Erzeugt einen radialen (kreisförmigen) Farbverlauf entlang der Linie gegeben durch die Koordinaten, die als Parameter übergeben werden.</dd>
 <dt>{{domxref("CanvasRenderingContext2D.createPattern()")}}</dt>
 <dd>Erzeugt ein Muster aus dem angegebenen Bild (ein {{domxref("CanvasImageSource")}}). Es wiederholt das Bild in den Richtungen, die mit dem <code>repetition</code> Parameter definiert werden. Diese Methode gibt ein {{domxref("CanvasPattern")}} zurück.</dd>
</dl>

<h3 id="Schatten">Schatten</h3>

<dl>
 <dt>{{domxref("CanvasRenderingContext2D.shadowBlur")}}</dt>
 <dd>Definiert den <span class="short_text" id="result_box" lang="de"><span>Unschärfe</span><span>-Effekt</span></span>. Standardwert <code>0</code></dd>
 <dt>{{domxref("CanvasRenderingContext2D.shadowColor")}}</dt>
 <dd>Farbe des Schattens. Standardwert: komplett transparentes Schwarz.</dd>
 <dt>{{domxref("CanvasRenderingContext2D.shadowOffsetX")}}</dt>
 <dd>Horizontale Entfernung des Schattens. Standardwert 0.</dd>
 <dt>{{domxref("CanvasRenderingContext2D.shadowOffsetY")}}</dt>
 <dd>Vertikale Entfernung des Schattens. Standardwert 0.</dd>
</dl>

<h3 id="Pfade">Pfade</h3>

<p>Die folgende Methoden können verwendet werden, um Pfade von Objekten zu manipulieren.</p>

<dl>
 <dt>{{domxref("CanvasRenderingContext2D.beginPath()")}}</dt>
 <dd>Startet einen neuen Pfad, indem die Liste mit allen Unterpfaden geleert wird. Rufe diese Methode auf, wenn du einen neuen Pfad starten willst.</dd>
 <dt>{{domxref("CanvasRenderingContext2D.closePath()")}}</dt>
 <dd>Sorgt dafür, dass die Stiftspitze zum Start des aktuellen Unterpfades zurückwandert. Es wird versucht eine greade Linie von der aktuellen Position zum Beginn der Linie zu zeichen. Wenn die Form schon geschlossen wurde oder nur einen Punkt enthält, macht diese Funktion nichts.</dd>
 <dt>{{domxref("CanvasRenderingContext2D.moveTo()")}}</dt>
 <dd>Bewegt den Anfangspunkt für einen neuen Unterpfad zu den übergebenen <strong>(x, y)</strong> Koordinaten.</dd>
 <dt>{{domxref("CanvasRenderingContext2D.lineTo()")}}</dt>
 <dd>Verbindet den letzten Punkt im Unterpfad mit den übergebenen <strong>(x, y)</strong> Koordinaten in einer geraden Linie.</dd>
 <dt>{{domxref("CanvasRenderingContext2D.bezierCurveTo()")}}</dt>
 <dd>Fügt eine kubische Bézierkurve zum Pfad hinzu. Diese benötigt drei Punkte. Die ersten zwei sind Kontrollpunkte für die Krümmung, der dritte ist das Ende der Kurve. Die Kurve beginnt am letzten Punkt im aktuellen Pfad, dieser kann davor mit <code>moveTo()</code> geändert werden.</dd>
 <dt>{{domxref("CanvasRenderingContext2D.quadraticCurveTo()")}}</dt>
 <dd>Fügt eine quadratische Bézierkurve zum aktuellen Pfad hinzu.</dd>
 <dt>{{domxref("CanvasRenderingContext2D.arc()")}}</dt>
 <dd>Fügt einen Kreisbogen zum Pfad hinzu, mit Kreismittelpunkt <em>(x, y)</em> und Radius <em>r</em>. Der Startwinkel ist <em>startAngle</em>, der Endwinkel <em>endAngle</em>, Richtung gegen den Uhrzeigersinn.</dd>
 <dt>{{domxref("CanvasRenderingContext2D.arcTo()")}}</dt>
 <dd>Fügt einen Kreisbogen zum Pfad mit den gegebenen Kontrollpunkten und Radius hinzu, verbunden mit dem letzten Punkt im Pfad durch eine gerade Linie.</dd>
 <dt>{{domxref("CanvasRenderingContext2D.ellipse()")}} {{experimental_inline}}</dt>
 <dd>Fügt eine Ellipse zum Pfad hinzu, mit dem Zentrum <em>(x, y)</em> und den Radien <em>radiusX</em> und <em>radiusY</em>, beginnend bei <em>startAngle</em> und endend bei <em>endAngle</em>, Richtung gegen den Uhrzeigersinn.</dd>
 <dt>{{domxref("CanvasRenderingContext2D.rect()")}}</dt>
 <dd>Erzeugt einen Pfad mit einem Rechteck an der Position <em>(x, y)</em> und den Dimensionen <em>width</em> und <em>height</em>.</dd>
</dl>

<h3 id="Pfade_zeichnen">Pfade zeichnen</h3>

<dl>
 <dt>{{domxref("CanvasRenderingContext2D.fill()")}}</dt>
 <dd>Füllt den Unterpfad mit der aktuellen Füllfarbe (bzw. Farbverlauf, Muster).</dd>
 <dt>{{domxref("CanvasRenderingContext2D.stroke()")}}</dt>
 <dd>Zeichnet die Linien des Unterpfades mit der aktuellen Linienfarbe (bzw. Farbverlauf, Muster).</dd>
 <dt>{{domxref("CanvasRenderingContext2D.drawFocusIfNeeded()")}}</dt>
 <dd>Wenn ein gegebenes Element fokussiert wird, zeichnet diese Methode einen Fokusring um den aktuellen Pfad.</dd>
 <dt>{{domxref("CanvasRenderingContext2D.scrollPathIntoView()")}}</dt>
 <dd>Scrollt den aktuellen Pfad oder einen bestimmten Pfad in Sicht.</dd>
 <dt>{{domxref("CanvasRenderingContext2D.clip()")}}</dt>
 <dd>Erzeugt einen zugeschnittenen Pfad aus den aktuellen Unterpfaden. Alles, was nach <code>clip()</code> gezeichnet wird, erscheint nur im zugeschnittenen Pfad. Für ein Beispiel, siehe  <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing" title="Clipping paths">Clipping paths</a> im Canvas Tutorial.</dd>
 <dt>{{domxref("CanvasRenderingContext2D.isPointInPath()")}}</dt>
 <dd>Gibt zurück, ob der angegebene Punkt im aktuellen Pfad enthalten ist oder nicht.</dd>
 <dt>{{domxref("CanvasRenderingContext2D.isPointInStroke()")}}</dt>
 <dd>Gibt zurück, ob der angegebene Punkt innerhalb des bemalten Bereichs im Pfad ist oder nicht.</dd>
</dl>

<h3 id="Transformationen">Transformationen</h3>

<p>Objekte im <code>CanvasRenderingContext2D</code>-Renderkontext haben eine aktuelle Transformationsmatrix und Methoden, um diese zu manipulieren. Die Transformationsmatrix wird angewendet, wenn der aktuelle Pfad erzeugt wird und wenn Text, Formen oder {{domxref("Path2D")}} Objekte gemalt werden. Folgende Methoden sind hier für historische und Kompatibilitätszwecke aufgelistet, da heutzutage meistens {{domxref("SVGMatrix")}} Objekte verwendet werden und in Zukunft diese Methoden ersetzen werden.</p>

<dl>
 <dt>{{domxref("CanvasRenderingContext2D.currentTransform")}} {{experimental_inline}}</dt>
 <dd>Die momentane Transformationsmatrix ({{domxref("SVGMatrix")}} object).</dd>
 <dt>{{domxref("CanvasRenderingContext2D.rotate()")}}</dt>
 <dd>Fügt eine Drehung zur Transformationsmatrix hinzu. Der <em>angle</em>-Parameter stellt einen Drehwinkel im Uhrzeigersinn dar und wird in radians ausgedrückt.</dd>
 <dt>{{domxref("CanvasRenderingContext2D.scale()")}}</dt>
 <dd>Fügt eine skalierende Transformation zu den Längeneinheiten des canvas hinzu (horizontal um Faktor <em>x</em>, vertikal um Faktor <em>y</em>). Was nach <code>scale()</code> auf das canvas gezeichnet wird, wird also dementsprechend gestaucht oder gestreckt.</dd>
 <dt>{{domxref("CanvasRenderingContext2D.translate()")}}</dt>
 <dd>Fügt eine übersetzende Transformation hinzu, die die Position des canvas relativ zu seinem Koordinatensystem verschiebt (horizontal um <em>x</em>, vertikal um <em>y</em>). Was nach <code>translate()</code> gezeichnet wird, ist also um <strong>(x, y)</strong> verschoben.</dd>
 <dt>{{domxref("CanvasRenderingContext2D.transform()")}}</dt>
 <dd>Multipliziert die aktuelle Transformationsmatrix mit der Matrix, die durch die Parameter dieser Funktion beschrieben wird.</dd>
 <dt>{{domxref("CanvasRenderingContext2D.setTransform()")}}</dt>
 <dd>Setzt die aktuellen Transformationen zurück und ruft dann die <code>transform()</code> Methode mit den selben Parametern auf.</dd>
 <dt>{{domxref("CanvasRenderingContext2D.resetTransform()")}} {{experimental_inline}}</dt>
 <dd>Setzt die aktuellen Transformationen zurück.</dd>
</dl>

<h3 id="Compositing">Compositing</h3>

<dl>
 <dt>{{domxref("CanvasRenderingContext2D.globalAlpha")}}</dt>
 <dd>Alpha-Wert bzw. Deckkraft, die auf alle Formen und Bilder angewendet wird, bevor diese auf dem canvas gezeichnet werden. Standardwert <code>1.0</code> (undurchsichtig).</dd>
 <dt>{{domxref("CanvasRenderingContext2D.globalCompositeOperation")}}</dt>
 <dd>Zusammen mit <code>globalAlpha</code> legt dieser Wert fest, wie Formen und Bilder abhängig vom Hintergrund auf das canvas gezeichnet werden sollen.</dd>
</dl>

<h3 id="Bilder_zeichnen">Bilder zeichnen</h3>

<dl>
 <dt>{{domxref("CanvasRenderingContext2D.drawImage()")}}</dt>
 <dd>Zeichnet das übergebene Bild. Diese Methode ist in diversen Formaten verfügbar, wodurch sie große Flexibilität in der Nutzung bietet.</dd>
</dl>

<h3 id="Pixelmanipulation">Pixelmanipulation</h3>

<p>Siehe auch das {{domxref("ImageData")}} Objekt.</p>

<dl>
 <dt>{{domxref("CanvasRenderingContext2D.createImageData()")}}</dt>
 <dd>Erzeugt ein neues, leeres {{domxref("ImageData")}} Objekt mit den angegebenen Dimensionen. Alle Pixel in diesem Objekt sind transparent schwarz.</dd>
 <dt>{{domxref("CanvasRenderingContext2D.getImageData()")}}</dt>
 <dd>Gibt ein {{domxref("ImageData")}} Objekt zurück, das die dem canvas zugrunde liegenden Pixeldaten enthält. Die Methode wird auf einen bestimmten Ausschnitt des canvas angewendet, beginnend bei <em>(sx, sy)</em>, mit Breite <em>sw</em> und Höhe <em>sh</em>.</dd>
 <dt>{{domxref("CanvasRenderingContext2D.putImageData()")}}</dt>
 <dd>Malt Pixeldaten des {{domxref("ImageData")}} Objekts auf das canvas. Wenn ein dreckiges Rechteck angegeben wird, werden nur die Pixel dieses Rechtecks gemalt.</dd>
</dl>

<h3 id="Bildglättung">Bildglättung</h3>

<dl>
 <dt>{{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}} {{experimental_inline}}</dt>
 <dd>Bildglättungsmodus; wenn deaktiviert, werden Bilder beim Skalieren nicht geglättet.</dd>
</dl>

<h3 id="Der_Leinwand-Zustand">Der Leinwand-Zustand</h3>

<p>Der <code>CanvasRenderingContext2D</code>-Renderkontext enthält eine Vielzahl an Zeichnungszuständen (Attribute für Linienstile, Füllstile, Schattenstile, Textstile). Die folgenden Methoden helfen Ihnen mit diesen Zuständen zu arbeiten:</p>

<dl>
 <dt>{{domxref("CanvasRenderingContext2D.save()")}}</dt>
 <dd>Saves the current drawing style state using a stack so you can revert any change you make to it using <code>restore()</code>.</dd>
 <dt>{{domxref("CanvasRenderingContext2D.restore()")}}</dt>
 <dd>Restores the drawing style state to the last element on the 'state stack' saved by <code>save()</code>.</dd>
 <dt>{{domxref("CanvasRenderingContext2D.canvas")}}</dt>
 <dd>A read-only back-reference to the {{domxref("HTMLCanvasElement")}}. Might be {{jsxref("null")}} if it is not associated with a {{HTMLElement("canvas")}} element.</dd>
</dl>

<h3 id="Trefferregionen">Trefferregionen</h3>

<dl>
 <dt>{{domxref("CanvasRenderingContext2D.addHitRegion()")}} {{experimental_inline}}</dt>
 <dd>Fügt eine Trefferregion (hit region) zur Leinwand hinzu.</dd>
 <dt>{{domxref("CanvasRenderingContext2D.removeHitRegion()")}} {{experimental_inline}}</dt>
 <dd>Entfernt eine Trefferregion mit gegebener <code>id</code> von der Leinwand.</dd>
 <dt>{{domxref("CanvasRenderingContext2D.clearHitRegions()")}} {{experimental_inline}}</dt>
 <dd>Entfernt alle Trefferregionen von der Leinwand.</dd>
</dl>

<h3 id="Filter">Filter</h3>

<dl>
 <dt>{{experimental_inline}} {{domxref("CanvasRenderingContext2D.filter")}}</dt>
 <dd>Applies a CSS or SVG filter to the canvas, e.g., to change its brightness or bluriness.</dd>
</dl>

<h2 id="Unstandardisierte_APIs">Unstandardisierte APIs</h2>

<h3 id="Blink_and_WebKit">Blink and WebKit</h3>

<p>Die meisten dieser APIs sind <a href="https://code.google.com/p/chromium/issues/detail?id=363198">veraltet und wurden kurz nach Chrome 36 entfernt</a>.</p>

<dl>
 <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.clearShadow()</code></dt>
 <dd>Entfernt alle Schatteneinstellungen wie  {{domxref("CanvasRenderingContext2D.shadowColor")}} und {{domxref("CanvasRenderingContext2D.shadowBlur")}}.</dd>
 <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.drawImageFromRect()</code></dt>
 <dd>Das ist redundant zum equivalenten Überladung von  <code>drawImage</code>.</dd>
 <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.setAlpha()</code></dt>
 <dd>Verwenden Sie {{domxref("CanvasRenderingContext2D.globalAlpha")}} anstelle dieser Methode.</dd>
 <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.setCompositeOperation()</code></dt>
 <dd>Verwenden Sie {{domxref("CanvasRenderingContext2D.globalCompositeOperation")}} anstelle dieser Methode.</dd>
 <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.setLineWidth()</code></dt>
 <dd>Verwenden Sie {{domxref("CanvasRenderingContext2D.lineWidth")}} anstelle dieser Methode.</dd>
 <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.setLineJoin()</code></dt>
 <dd>Verwenden Sie {{domxref("CanvasRenderingContext2D.lineJoin")}} anstelle dieser Methode.</dd>
 <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.setLineCap()</code></dt>
 <dd>Verwenden Sie {{domxref("CanvasRenderingContext2D.lineCap")}} anstelle dieser Methode.</dd>
 <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.setMiterLimit()</code></dt>
 <dd>Verwenden Sie {{domxref("CanvasRenderingContext2D.miterLimit")}} anstelle dieser Methode.</dd>
 <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.setStrokeColor()</code></dt>
 <dd>Verwenden Sie {{domxref("CanvasRenderingContext2D.strokeStyle")}} anstelle dieser Methode.</dd>
 <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.setFillColor()</code></dt>
 <dd>Verwenden Sie {{domxref("CanvasRenderingContext2D.fillStyle")}} anstelle dieser Methode.</dd>
 <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.setShadow()</code></dt>
 <dd>Verwenden Sie {{domxref("CanvasRenderingContext2D.shadowColor")}} und {{domxref("CanvasRenderingContext2D.shadowBlur")}} anstelle dieser Methode.</dd>
 <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.webkitLineDash</code></dt>
 <dd>Verwenden Sie {{domxref("CanvasRenderingContext2D.getLineDash()")}} und {{domxref("CanvasRenderingContext2D.setLineDash()")}} anstelle dieser Methode.</dd>
 <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.webkitLineDashOffset</code></dt>
 <dd>Verwenden Sie {{domxref("CanvasRenderingContext2D.lineDashOffset")}} anstelle dieser Methode.</dd>
 <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.webkitImageSmoothingEnabled</code></dt>
 <dd>Verwenden Sie {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}} anstelle dieser Methode.</dd>
</dl>

<h3 id="Blink_only">Blink only</h3>

<dl>
 <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.getContextAttributes()</code></dt>
 <dd>Inspired by the same <code>WebGLRenderingContext</code> method it returns an <code>Canvas2DContextAttributes</code> object that contains the attributes "storage" to indicate which storage is used ("persistent" by default) and the attribute "alpha" (<code>true</code> by default) to indicate that transparency is used in the canvas.</dd>
 <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.isContextLost()</code></dt>
 <dd>Inspired by the same <code>WebGLRenderingContext</code> method it returns <code>true</code> if the Canvas context has been lost, or <code>false</code> if not.</dd>
</dl>

<h3 id="WebKit_only">WebKit only</h3>

<dl>
 <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitBackingStorePixelRatio</code></dt>
 <dd>The backing store size in relation to the canvas element. See <a href="http://www.html5rocks.com/en/tutorials/canvas/hidpi/">High DPI Canvas</a>.</dd>
 <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitGetImageDataHD</code></dt>
 <dd>Intended for HD backing stores, but removed from canvas specifications.</dd>
 <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitPutImageDataHD</code></dt>
 <dd>Intended for HD backing stores, but removed from canvas specifications.</dd>
</dl>

<dl>
</dl>

<h3 id="Gecko_only">Gecko only</h3>

<dl>
 <dt>{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.filter")}}</dt>
 <dd><span id="summary_alias_container"><span id="short_desc_nonedit_display">CSS and SVG filters as Canvas APIs</span></span>. Likely to be standardized in a new version of the specification.</dd>
</dl>

<h4 id="Prefixed_APIs">Prefixed APIs</h4>

<dl>
 <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.mozCurrentTransform</code></dt>
 <dd>Sets or gets the current transformation matrix, see {{domxref("CanvasRenderingContext2D.currentTransform")}}.  {{ gecko_minversion_inline("7.0") }}</dd>
 <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.mozCurrentTransformInverse</code></dt>
 <dd>Sets or gets the current inversed transformation matrix.  {{ gecko_minversion_inline("7.0") }}</dd>
 <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.mozFillRule</code></dt>
 <dd>The <a class="external" href="http://cairographics.org/manual/cairo-cairo-t.html#cairo-fill-rule-t" title="http://cairographics.org/manual/cairo-cairo-t.html#cairo-fill-rule-t">fill rule</a> to use. This must be one of <code>evenodd</code> or <code>nonzero</code> (default).</dd>
 <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.mozImageSmoothingEnabled</code></dt>
 <dd>See {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}}.</dd>
 <dt>{{non-standard_inline}} {{deprecated_inline}} <code>CanvasRenderingContext2D.mozDash</code></dt>
 <dd>An array which specifies the lengths of alternating dashes and gaps {{ gecko_minversion_inline("7.0") }}. Use {{domxref("CanvasRenderingContext2D.getLineDash()")}} and {{domxref("CanvasRenderingContext2D.setLineDash()")}} instead.</dd>
 <dt>{{non-standard_inline}} {{deprecated_inline}} <code>CanvasRenderingContext2D.mozDashOffset</code></dt>
 <dd>Specifies where to start a dash array on a line. {{ gecko_minversion_inline("7.0") }}. Use {{domxref("CanvasRenderingContext2D.lineDashOffset")}} instead.</dd>
 <dt>{{non-standard_inline}} {{deprecated_inline}} <code>CanvasRenderingContext2D.mozTextStyle</code></dt>
 <dd>Introduced in in Gecko 1.9, deprecated in favor of the {{domxref("CanvasRenderingContext2D.font")}} property.</dd>
 <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.mozDrawText()</code></dt>
 <dd>This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0. Use {{domxref("CanvasRenderingContext2D.strokeText()")}} or {{domxref("CanvasRenderingContext2D.fillText()")}} instead.</dd>
 <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.mozMeasureText()</code></dt>
 <dd>This method was introduced in Gecko 1.9 and is unimplemented starting with Gecko 7.0. Use {{domxref("CanvasRenderingContext2D.measureText()")}} instead.</dd>
 <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.mozPathText()</code></dt>
 <dd>This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.</dd>
 <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.mozTextAlongPath()</code></dt>
 <dd>This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.</dd>
</dl>

<h4 id="Internal_APIs_(chrome-context_only)">Internal APIs (chrome-context only)</h4>

<dl>
 <dt>{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.asyncDrawXULElement()")}}</dt>
 <dd>Renders a region of a XUL element into the <code>canvas</code>.</dd>
 <dt>{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.drawWindow()")}}</dt>
 <dd>Renders a region of a window into the <code>canvas</code>. The contents of the window's viewport are rendered, ignoring viewport clipping and scrolling.</dd>
 <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.demote()</code></dt>
 <dd>This causes a context that is currently using a hardware-accelerated backend to fallback to a software one. All state should be preserved.</dd>
</dl>

<h3 id="Internet_Explorer">Internet Explorer</h3>

<dl>
 <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.msFillRule</code></dt>
 <dd>The <a class="external" href="http://cairographics.org/manual/cairo-cairo-t.html#cairo-fill-rule-t" title="http://cairographics.org/manual/cairo-cairo-t.html#cairo-fill-rule-t">fill rule</a> to use. This must be one of <code>evenodd</code> or <code>nonzero</code> (default).</dd>
</dl>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('HTML WHATWG', "scripting.html#2dcontext:canvasrenderingcontext2d", "CanvasRenderingContext2D")}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<div>


<p>{{Compat("api.CanvasRenderingContext2D")}}</p>
</div>

<ul>
 <li>Starting with Gecko 5.0 {{geckoRelease("5.0")}}, specifying invalid values are now silently ignored for the following methods and properties: <code>translate()</code>, <code>transform()</code>, <code>rotate(), </code><code>scale(),</code> <code>rect()</code>, <code>clearRect()</code>, <code>fillRect()</code>, <code>strokeRect()</code>, <code>lineTo()</code>, <code>moveTo()</code>, <code>quadraticCurveTo()</code>, <code>arc()</code>, <code>shadowOffsetX</code>, <code>shadowOffsetY</code>,  <code>shadowBlur</code>.</li>
</ul>

<h2 id="See_also">See also</h2>

<ul>
 <li>{{domxref("HTMLCanvasElement")}}</li>
</ul>