initial commit

author: Peter Bengtsson <mail@peterbe.com> 2020-12-08 14:41:15 -0500
committer: Peter Bengtsson <mail@peterbe.com> 2020-12-08 14:41:15 -0500
commit: 4b1a9203c547c019fc5398082ae19a3f3d4c3efe (patch)
tree: d4a40e13ceeb9f85479605110a76e7a4d5f3b56b /files/de/web/api
parent: 33058f2b292b3a581333bdfb21b8f671898c5060 (diff)
download: translated-content-4b1a9203c547c019fc5398082ae19a3f3d4c3efe.tar.gz
translated-content-4b1a9203c547c019fc5398082ae19a3f3d4c3efe.tar.bz2
translated-content-4b1a9203c547c019fc5398082ae19a3f3d4c3efe.zip
294 files changed, 44794 insertions, 0 deletions
diff --git a/files/de/web/api/aescbcparams/index.html b/files/de/web/api/aescbcparams/index.html
new file mode 100644
index 0000000000..65c2effd7b
--- /dev/null
+++ b/files/de/web/api/aescbcparams/index.html
@@ -0,0 +1,52 @@
+---
+title: AesCbcParams
+slug: Web/API/AesCbcParams
+translation_of: Web/API/AesCbcParams
+---
+<div>{{ APIRef("Web Crypto API") }}</div>
+
+<p>Das <strong><code>AesCbcParams</code></strong> Verzeichnis (dictionary) der <a href="/en-US/docs/Web/API/Web_Crypto_API">Web Crypto API </a>wird als <code>algorithm</code> Parameter an die Funktionen {{domxref("SubtleCrypto.encrypt()")}}, {{domxref("SubtleCrypto.decrypt()")}}, {{domxref("SubtleCrypto.wrapKey()")}} und {{domxref("SubtleCrypto.unwrapKey()")}} übergeben, wenn der Algorithmus <a href="/en-US/docs/Web/API/SubtleCrypto/encrypt#AES-CBC">AES-CBC</a> verwendet wird.</p>
+
+<h2 id="Eigenschaften">Eigenschaften</h2>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>A {{domxref("DOMString")}}. Der Wert sollte auf <code>AES-CBC</code> gesetzt werden.</dd>
+ <dt><code>iv</code></dt>
+ <dd>Ein {{domxref("BufferSource")}}. Der Initialisierungsvektor. Er muss 16 Bytes lang sein und sollte unvorhersehbar und am besten kryptografisch zufällig sein. Er muss aber nicht geheim sein, er kann unverschlüsselt mit dem Kryptogram übertragen werden.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Siehe Beispiele für {{domxref("SubtleCrypto.encrypt()")}} und {{domxref("SubtleCrypto.decrypt()")}}.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{ SpecName('Web Crypto API', '#dfn-AesCbcParams', 'SubtleCrypto.AesCbcParams') }}</td>
+   <td>{{ Spec2('Web Crypto API') }}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>Browser mit Unterstützung für den "AES-CBC" Algorithmus werden die Methoden {{domxref("SubtleCrypto.encrypt()")}}, {{domxref("SubtleCrypto.decrypt()")}}, {{domxref("SubtleCrypto.wrapKey()")}} und {{domxref("SubtleCrypto.unwrapKey()")}} für diesen Typ unterstützen.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>CBC Modus wird in Sektion 6.2 des <a class="external external-icon" href="https://nvlpubs.nist.gov/nistpubs/Legacy/SP/nistspecialpublication800-38a.pdf#%5B%7B%22num%22%3A70%2C%22gen%22%3A0%7D%2C%7B%22name%22%3A%22Fit%22%7D%5D" rel="noopener">NIST SP800-38A standard</a> spezifiziert.</li>
+ <li>{{domxref("SubtleCrypto.encrypt()")}}.</li>
+ <li>{{domxref("SubtleCrypto.decrypt()")}}.</li>
+ <li>{{domxref("SubtleCrypto.wrapKey()")}}.</li>
+ <li>{{domxref("SubtleCrypto.unwrapKey()")}}.</li>
+</ul>
diff --git a/files/de/web/api/animationevent/index.html b/files/de/web/api/animationevent/index.html
new file mode 100644
index 0000000000..7bd808e0ca
--- /dev/null
+++ b/files/de/web/api/animationevent/index.html
@@ -0,0 +1,190 @@
+---
+title: AnimationEvent
+slug: Web/API/AnimationEvent
+tags:
+  - API
+  - Experimental
+  - Expérimental(2)
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - Référence(2)
+  - TopicStub
+  - Web Animations
+translation_of: Web/API/AnimationEvent
+---
+<p>{{SeeCompatTable}}{{APIRef("Web Animations API")}}</p>
+
+<p>The <strong><code>AnimationEvent</code></strong> interface represents events providing information related to <a href="/en-US/docs/Web/Guide/CSS/Using_CSS_animations">animations</a>.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>Also inherits properties from its parent {{domxref("Event")}}</em>.</p>
+
+<dl>
+ <dt>{{domxref("AnimationEvent.animationName")}} {{readonlyInline}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing the value of the {{cssxref("animation-name")}} CSS property associated with the transition.</dd>
+ <dt>{{domxref("AnimationEvent.elapsedTime")}} {{readonlyInline}}</dt>
+ <dd>Is a <code>float</code> giving the amount of time the animation has been running, in seconds, when this event fired, excluding any time the animation was paused. For an <code>"animationstart"</code> event, <code>elapsedTime</code> is <code>0.0</code> unless there was a negative value for {{cssxref("animation-delay")}}, in which case the event will be fired with <code>elapsedTime</code> containing  <code>(-1 * </code><em>delay</em><code>)</code>.</dd>
+ <dt>{{domxref("AnimationEvent.pseudoElement")}} {{readonlyInline}}</dt>
+ <dd>Is a {{domxref("DOMString")}}, starting with <code>'::'</code>, containing the name of the <a href="/en-US/docs/Web/CSS/Pseudo-elements" title="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-element</a> the animation runs on. If the animation doesn't run on a pseudo-element but on the element, an empty string: <code>''</code><code>.</code></dd>
+</dl>
+
+<h2 id="Constructor">Constructor</h2>
+
+<dl>
+ <dt>{{domxref("AnimationEvent.AnimationEvent", "AnimationEvent()")}}</dt>
+ <dd>Creates an <code>AnimationEvent</code> event with the given parameters.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>Also inherits methods from its parent {{domxref("Event")}}</em>.</p>
+
+<dl>
+ <dt>{{domxref("AnimationEvent.initAnimationEvent()")}} {{non-standard_inline}}{{deprecated_inline}}</dt>
+ <dd>Initializes a <code>AnimationEvent</code> created using the deprecated {{domxref("Document.createEvent()", "Document.createEvent(\"AnimationEvent\")")}} method.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Animations', '#AnimationEvent-interface', 'AnimationEvent') }}</td>
+   <td>{{ Spec2('CSS3 Animations') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</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>
+    <p>1.0 {{ property_prefix("webkit") }}</p>
+
+    <p>{{CompatChrome(43.0)}}</p>
+   </td>
+   <td>{{ CompatGeckoDesktop("6.0") }}</td>
+   <td>10.0</td>
+   <td>12 {{ property_prefix("o") }}<br>
+    12.10<br>
+    15.0 {{ property_prefix("webkit") }}</td>
+   <td>4.0 {{ property_prefix("webkit") }}</td>
+  </tr>
+  <tr>
+   <td><code>AnimationEvent()</code> constructor</td>
+   <td>
+    <p>{{CompatChrome(43.0)}}</p>
+   </td>
+   <td>{{ CompatGeckoDesktop("23.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>initAnimationEvent()</code> {{non-standard_inline}}{{deprecated_inline}}</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoDesktop("6.0") }}<br>
+    Removed in {{ CompatGeckoDesktop("23.0") }}</td>
+   <td>10.0</td>
+   <td>12</td>
+   <td>4.0</td>
+  </tr>
+  <tr>
+   <td><code>pseudoelement</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("23.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}{{ property_prefix("webkit") }}</td>
+   <td>{{ CompatGeckoMobile("6.0") }}</td>
+   <td>10.0</td>
+   <td>12 {{ property_prefix("o") }}<br>
+    12.10<br>
+    15.0 {{ property_prefix("webkit") }}</td>
+   <td>{{CompatVersionUnknown}}{{ property_prefix("webkit") }}</td>
+   <td>{{CompatChrome(43.0)}}</td>
+  </tr>
+  <tr>
+   <td><code>AnimationEvent()</code> constructor</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("23.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(43.0)}}</td>
+  </tr>
+  <tr>
+   <td><code>initAnimationEvent()</code> {{non-standard_inline}}{{deprecated_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile("6.0") }}<br>
+    Removed in {{ CompatGeckoMobile("23.0") }}</td>
+   <td>10.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>pseudoelement</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("23.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Using_CSS_animations">Using CSS animations</a></li>
+ <li>Animation-related CSS properties and at-rules: {{cssxref("animation")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-name")}}, {{cssxref("animation-play-state")}}, {{cssxref("animation-timing-function")}}, {{cssxref("@keyframes")}}.</li>
+</ul>
diff --git a/files/de/web/api/audiocontext/decodeaudiodata/index.html b/files/de/web/api/audiocontext/decodeaudiodata/index.html
new file mode 100644
index 0000000000..32cfda28eb
--- /dev/null
+++ b/files/de/web/api/audiocontext/decodeaudiodata/index.html
@@ -0,0 +1,218 @@
+---
+title: AudioContext.decodeAudioData()
+slug: Web/API/AudioContext/decodeAudioData
+translation_of: Web/API/BaseAudioContext/decodeAudioData
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<div>
+<p>Die Methode decodeAudioData() im Interface {{ domxref("AudioContext") }} wird dazu benutzt um in einem {{ domxref("ArrayBuffer")}} enthaltene Audiodaten asynchron zu dekodieren. Im Normalfall wird der ArrayBuffer mit der  {{domxref("XMLHttpRequest")}} <code>response</code> Eigenschaft befüllt, nachdem der <code>responseType</code> auf <code>arraybuffer gesetzt wurde</code>. Der dekodierte AudioBuffer wird auf die Samplerate des AudioContextes angepasst und anschließend an ein Callback oder Promise weitergegeben.</p>
+</div>
+
+<p>Dies ist die bevorzugte Methode im eine Audioquelle für die Web Audio API aus einem Audiotrack zu generieren.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<p>Alte Callbacksyntax:</p>
+
+<pre class="syntaxbox">audioCtx.decodeAudioData(audioData, function(decodedData) {
+  // use the decoded data here
+});</pre>
+
+<p>Neue Promise basierte Syntax:</p>
+
+<pre class="syntaxbox">audioCtx.decodeAudioData(audioData).then(function(decodedData) {
+  // use the decoded data here
+});</pre>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<p>In diesem Abschnitt wird zuerst die ältere Callback basierte Syntax und anschließend die neue Promise basierte Syntax behandelt.</p>
+
+<h3 id="Ältere_Callbacksyntax">Ältere Callbacksyntax</h3>
+
+<p>In diesem Beispiel nutzt die getData() Funktion XHR um einen Audiotrack zu laden, indem sie die responseType Eigenschaft setzt um einen ArrayBuffer als Antwort zu erhalten, welcher anschließend in der audioData variable gespeichert wird. Dieser Buffer wird nun an die decodeAudioData() Funktion übergeben; Das success Callback nutzt die erfolgreich dekodierten PCM Daten, erstellt einen {{ domxref("AudioBufferSourceNode") }} mit Hilfe von {{ domxref("AudioContext.createBufferSource()") }}, verbindet diese Quelle mit {{domxref("AudioContext.destination") }} und setzt den Schleifenmodus.</p>
+
+<p>Die Buttons in diesem Beispiel rufen lediglich getData() um die Daten zu laden und die Wiedergabe zu starten, sowie stop() um die Wiedergabe anzuhalten auf. Wenn die stop() Methode der Quelle aufgerufen wird die Quelle geleert.</p>
+
+<div class="note">
+<p><strong>Note</strong>: You can <a href="http://mdn.github.io/decode-audio-data/">run the example live</a> (or <a href="https://github.com/mdn/decode-audio-data">view the source</a>.)</p>
+</div>
+
+<pre class="brush: js">// Variablen definieren
+
+var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+var source;
+
+var pre = document.querySelector('pre');
+var myScript = document.querySelector('script');
+var play = document.querySelector('.play');
+var stop = document.querySelector('.stop');
+
+// Benutzt XHR um einen Track zu laden und
+// decodeAudioData um diesen zu dekodieren und in einen Buffer zu kopieren.
+// Anschließend wird der Buffer in eine Quelle kopiert.
+
+function getData() {
+  source = audioCtx.createBufferSource();
+  var request = new XMLHttpRequest();
+
+  request.open('GET', 'viper.ogg', true);
+
+  request.responseType = 'arraybuffer';
+
+
+  request.onload = function() {
+    var audioData = request.response;
+
+    audioCtx.decodeAudioData(audioData, function(buffer) {
+        source.buffer = buffer;
+
+        source.connect(audioCtx.destination);
+        source.loop = true;
+      },
+
+      function(e){"Error with decoding audio data" + e.err});
+
+  }
+
+  request.send();
+}
+
+// Buttons setzen um Wiedergabe zu starten und stoppen
+
+play.onclick = function() {
+  getData();
+  source.start(0);
+  play.setAttribute('disabled', 'disabled');
+}
+
+stop.onclick = function() {
+  source.stop(0);
+  play.removeAttribute('disabled');
+}
+
+
+// Script ausgeben
+
+pre.innerHTML = myScript.innerHTML;</pre>
+
+<h3 id="Neue_Promise_basierte_Syntax">Neue Promise basierte Syntax</h3>
+
+<pre class="brush: js">ctx.decodeAudioData(compressedBuffer).then(function(decodedData) {
+ // Die dekodierten PCM Daten können hier verwendet werden
+});</pre>
+
+<h2 id="Parameter">Parameter</h2>
+
+<dl>
+ <dt>ArrayBuffer</dt>
+ <dd>Ein ArrayBuffer der die zu dekodierenden Daten enthält. Dieser wird normalerweise durch einen {{domxref("XMLHttpRequest")}} befüllt nachdem der <code>responseType</code> auf <code>arraybuffer gesetzt wurde</code>.</dd>
+ <dt>DecodeSuccessCallback</dt>
+ <dd>Ein Callback das aufgerufen wird wenn die Dekodierung erfolgreich abgeschlossen wird. Der einzige Parameter der an diese Funktion übergeben wird stellt einen AudioBuffer dar, der die dekodierten Audiodaten enthält. Normalerweise wird dieser Buffer an einen {{domxref("AudioBufferSourceNode")}} übergeben, von wo er wiedergeben und verändert werden kann.</dd>
+ <dt>DecodeErrorCallback</dt>
+ <dd>Ein optionales Callback das bei einem Fehler während der Dekodierung aufgerufen wird.</dd>
+</dl>
+
+<h2 id="Rückgabewerte">Rückgabewerte</h2>
+
+<p>Ein {{domxref("AudioBuffer") }} der die dekodierten Audiodaten enthällt.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#widl-AudioContext-decodeAudioData-Promise-AudioBuffer--ArrayBuffer-audioData-DecodeSuccessCallback-successCallback-DecodeErrorCallback-errorCallback', 'decodeAudioData()')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserunterstützung">Browserunterstützung</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(10.0)}}{{property_prefix("webkit")}}</td>
+   <td>{{CompatGeckoDesktop(25.0)}} </td>
+   <td>{{CompatNo}}</td>
+   <td>15.0{{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>6.0{{property_prefix("webkit")}}</td>
+  </tr>
+  <tr>
+   <td>Promise-based syntax</td>
+   <td>{{CompatChrome(49.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>26.0</td>
+   <td>1.2</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(33.0)}}</td>
+  </tr>
+  <tr>
+   <td>Promise-based syntax</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(49.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(49.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
+</ul>
diff --git a/files/de/web/api/audiocontext/index.html b/files/de/web/api/audiocontext/index.html
new file mode 100644
index 0000000000..cc2c2db92e
--- /dev/null
+++ b/files/de/web/api/audiocontext/index.html
@@ -0,0 +1,232 @@
+---
+title: AudioContext
+slug: Web/API/AudioContext
+translation_of: Web/API/AudioContext
+---
+<p>{{APIRef("Web Audio API")}}</p>
+
+<div>
+<p>Die <code>AudioContext</code> Schnittstelle bildet einen Audioverarbeitungsdiagramm, aus mehreren miteinander verbundenen Audiomodulen bestehend, ab. Bei jedem dieser Module handelt es sich um einen Knoten ({{domxref("AudioNode")}}). Ein AudioContext kontrolliert sowohl die Erstellung der einzelnen in ihm enthaltenen Knoten als auch den Prozess der Audioverarbeitung oder des Dekodierens. Als erster Schritt muss immer ein Audio Kontext angelegt werden, da sämtliche Funktionen innerhalb dieses Kontextes ausgeführt werden.</p>
+</div>
+
+<p><code>Ein AudioContext</code> kann das Ziel von Events sein, aufgrund dessen unterstützt er auch die {{domxref("EventTarget")}} Schnittstelle.</p>
+
+<h2 id="Eigenschaften">Eigenschaften</h2>
+
+<dl>
+ <dt>{{domxref("AudioContext.currentTime")}} {{readonlyInline}}</dt>
+ <dd>Returns a double representing an ever-increasing hardware time in seconds used for scheduling. It starts at <code>0</code>.</dd>
+ <dt>{{domxref("AudioContext.destination")}} {{readonlyInline}}</dt>
+ <dd>Returns an {{domxref("AudioDestinationNode")}} representing the final destination of all audio in the context. It can be thought of as the audio-rendering device.</dd>
+ <dt>{{domxref("AudioContext.listener")}} {{readonlyInline}}</dt>
+ <dd>Returns the {{domxref("AudioListener")}} object, used for 3D spatialization.</dd>
+ <dt>{{domxref("AudioContext.sampleRate")}} {{readonlyInline}}</dt>
+ <dd>Returns a float representing the sample rate (in samples per second) used by all nodes in this context. The sample-rate of an {{domxref("AudioContext")}} cannot be changed.</dd>
+ <dt>{{domxref("AudioContext.state")}} {{readonlyInline}}</dt>
+ <dd>Returns the current state of the <code>AudioContext</code>.</dd>
+ <dt>{{domxref("AudioContext.mozAudioChannelType")}} {{ non-standard_inline() }} {{readonlyInline}}</dt>
+ <dd>Used to return the audio channel that the sound playing in an {{domxref("AudioContext")}} will play in, on a Firefox OS device.</dd>
+</dl>
+
+<h3 id="Event_handlers">Event handlers</h3>
+
+<dl>
+ <dt>{{domxref("AudioContext.onstatechange")}}</dt>
+ <dd>An event handler that runs when an event of type {{event("statechange")}} has fired. This occurs when the <code>AudioContext</code>'s state changes, due to the calling of one of the state change methods ({{domxref("AudioContext.suspend")}}, {{domxref("AudioContext.resume")}}, or {{domxref("AudioContext.close")}}.)</dd>
+</dl>
+
+<h2 id="Methoden">Methoden</h2>
+
+<p><em>Implementiert zusätzlich die Methoden der Schnittstelle </em>{{domxref("EventTarget")}}.</p>
+
+<dl>
+ <dt>{{domxref("AudioContext.close()")}}</dt>
+ <dd>Closes the audio context, releasing any system audio resources that it uses.</dd>
+ <dt>{{domxref("AudioContext.createBuffer()")}}</dt>
+ <dd>Creates a new, empty {{ domxref("AudioBuffer") }} object, which can then be populated by data and played via an {{ domxref("AudioBufferSourceNode") }}.</dd>
+ <dt>{{domxref("AudioContext.createBufferSource()")}}</dt>
+ <dd>Creates an {{domxref("AudioBufferSourceNode")}}, which can be used to play and manipulate audio data contained within an {{ domxref("AudioBuffer") }} object. {{ domxref("AudioBuffer") }}s are created using {{domxref("AudioContext.createBuffer")}} or returned by {{domxref("AudioContext.decodeAudioData")}} when it successfully decodes an audio track.</dd>
+ <dt>{{domxref("AudioContext.createMediaElementSource()")}}</dt>
+ <dd>Creates a {{domxref("MediaElementAudioSourceNode")}} associated with an {{domxref("HTMLMediaElement")}}. This can be used to play and manipulate audio from {{HTMLElement("video")}} or {{HTMLElement("audio")}} elements.</dd>
+ <dt>{{domxref("AudioContext.createMediaStreamSource()")}}</dt>
+ <dd>Creates a {{domxref("MediaStreamAudioSourceNode")}} associated with a {{domxref("MediaStream")}} representing an audio stream which may come from the local computer microphone or other sources.</dd>
+ <dt>{{domxref("AudioContext.createMediaStreamDestination()")}}</dt>
+ <dd>Creates a {{domxref("MediaStreamAudioDestinationNode")}} associated with a {{domxref("MediaStream")}} representing an audio stream which may be stored in a local file or sent to another computer.</dd>
+ <dt>{{domxref("AudioContext.createScriptProcessor()")}}</dt>
+ <dd>Creates a {{domxref("ScriptProcessorNode")}}, which can be used for direct audio processing via JavaScript.</dd>
+ <dt>{{domxref("AudioContext.createStereoPanner()")}}</dt>
+ <dd>Creates a {{domxref("StereoPannerNode")}}, which can be used to apply stereo panning to an audio source.</dd>
+ <dt>{{domxref("AudioContext.createAnalyser()")}}</dt>
+ <dd>Creates an {{domxref("AnalyserNode")}}, which can be used to expose audio time and frequency data and for example to create data visualisations.</dd>
+ <dt>{{domxref("AudioContext.createBiquadFilter()")}}</dt>
+ <dd>Creates a {{domxref("BiquadFilterNode")}}, which represents a second order filter configurable as several different common filter types: high-pass, low-pass, band-pass, etc.</dd>
+ <dt>{{domxref("AudioContext.createChannelMerger()")}}</dt>
+ <dd>Creates a {{domxref("ChannelMergerNode")}}, which is used to combine channels from multiple audio streams into a single audio stream.</dd>
+ <dt>{{domxref("AudioContext.createChannelSplitter()")}}</dt>
+ <dd>Creates a {{domxref("ChannelSplitterNode")}}, which is used to access the individual channels of an audio stream and process them separately.</dd>
+ <dt>{{domxref("AudioContext.createConvolver()")}}</dt>
+ <dd>Creates a {{domxref("ConvolverNode")}}, which can be used to apply convolution effects to your audio graph, for example a reverberation effect.</dd>
+ <dt>{{domxref("AudioContext.createDelay()")}}</dt>
+ <dd>Creates a {{domxref("DelayNode")}}, which is used to delay the incoming audio signal by a certain amount. This node is also useful to create feedback loops in a Web Audio API graph.</dd>
+ <dt>{{domxref("AudioContext.createDynamicsCompressor()")}}</dt>
+ <dd>Creates a {{domxref("DynamicsCompressorNode")}}, which can be used to apply acoustic compression to an audio signal.</dd>
+ <dt>{{domxref("AudioContext.createGain()")}}</dt>
+ <dd>Creates a {{domxref("GainNode")}}, which can be used to control the overall volume of the audio graph.</dd>
+ <dt>{{domxref("AudioContext.createOscillator()")}}</dt>
+ <dd>Creates an {{domxref("OscillatorNode")}}, a source representing a periodic waveform. It basically generates a tone.</dd>
+ <dt>{{domxref("AudioContext.createPanner()")}}</dt>
+ <dd>Creates a {{domxref("PannerNode")}}, which is used to spatialise an incoming audio stream in 3D space.</dd>
+ <dt>{{domxref("AudioContext.createPeriodicWave()")}}</dt>
+ <dd>Creates a {{domxref("PeriodicWave")}}, used to define a periodic waveform that can be used to determine the output of an {{ domxref("OscillatorNode") }}.</dd>
+ <dt>{{domxref("AudioContext.createWaveShaper()")}}</dt>
+ <dd>Creates a {{domxref("WaveShaperNode")}}, which is used to implement non-linear distortion effects.</dd>
+ <dt>{{domxref("AudioContext.createAudioWorker()")}}</dt>
+ <dd>Creates an {{domxref("AudioWorkerNode")}}, which can interact with a web worker thread to generate, process, or analyse audio directly. This was added to the spec on August 29 2014, and is not implemented in any browser yet.</dd>
+ <dt>{{domxref("AudioContext.decodeAudioData()")}}</dt>
+ <dd>Asynchronously decodes audio file data contained in an {{domxref("ArrayBuffer")}}. In this case, the ArrayBuffer is usually loaded from an {{domxref("XMLHttpRequest")}}'s <code>response</code> attribute after setting the <code>responseType</code> to <code>arraybuffer</code>. This method only works on complete files, not fragments of audio files.</dd>
+ <dt>{{domxref("AudioContext.resume()")}}</dt>
+ <dd>Resumes the progression of time in an audio context that has previously been suspended.</dd>
+ <dt>{{domxref("AudioContext.suspend()")}}</dt>
+ <dd>Suspends the progression of time in the audio context, temporarily halting audio hardware access and reducing CPU/battery usage in the process.</dd>
+</dl>
+
+<h2 id="Obsolete_Methoden">Obsolete Methoden</h2>
+
+<dl>
+ <dt>{{domxref("AudioContext.createJavaScriptNode()")}}</dt>
+ <dd>Creates a {{domxref("JavaScriptNode")}}, used for direct audio processing via JavaScript. This method is obsolete, and has been replaced by {{domxref("AudioContext.createScriptProcessor()")}}.</dd>
+ <dt>{{domxref("AudioContext.createWaveTable()")}}</dt>
+ <dd>Creates a {{domxref("WaveTableNode")}}, used to define a periodic waveform. This method is obsolete, and has been replaced by {{domxref("AudioContext.createPeriodicWave()")}}.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Grundsätzliche Deklarierung eines Audio Kontextes:</p>
+
+<pre class="brush: js">var audioCtx = new AudioContext();</pre>
+
+<p>Browserunabhängige Variante:</p>
+
+<pre class="brush: js">var AudioContext = window.AudioContext || window.webkitAudioContext;
+var audioCtx = new AudioContext();
+
+var oscillatorNode = audioCtx.createOscillator();
+var gainNode = audioCtx.createGain();
+var finish = audioCtx.destination;
+// etc.</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</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('Web Audio API', '#the-audiocontext-interface', 'AudioContext')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(10.0)}}{{property_prefix("webkit")}}<br>
+    35</td>
+   <td>{{CompatGeckoDesktop(25.0)}} </td>
+   <td>{{CompatNo}}</td>
+   <td>15.0{{property_prefix("webkit")}}<br>
+    22</td>
+   <td>6.0{{property_prefix("webkit")}}</td>
+  </tr>
+  <tr>
+   <td><code>createStereoPanner()</code></td>
+   <td>{{CompatChrome(42.0)}}</td>
+   <td>{{CompatGeckoDesktop(37.0)}} </td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>onstatechange</code>, <code>state</code>, <code>suspend()</code>, <code>resume()</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(40.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(37.0)}} </td>
+   <td>2.2</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>createStereoPanner()</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onstatechange</code>, <code>state</code>, <code>suspend()</code>, <code>resume()</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul style="margin-left: 40px;">
+ <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
+ <li>{{domxref("OfflineAudioContext")}}</li>
+</ul>
diff --git a/files/de/web/api/audiodestinationnode/index.html b/files/de/web/api/audiodestinationnode/index.html
new file mode 100644
index 0000000000..4acda5845c
--- /dev/null
+++ b/files/de/web/api/audiodestinationnode/index.html
@@ -0,0 +1,141 @@
+---
+title: AudioDestinationNode
+slug: Web/API/AudioDestinationNode
+translation_of: Web/API/AudioDestinationNode
+---
+<p>{{APIRef("Web Audio API")}}</p>
+
+<div>
+<p>Die <code>AudioDestinationNode</code> Schnittstelle repräsentiert das Ziel bzw. den Ausgang eines Audiographen in einem gegebenen Kontext — in der Regel die Lautsprecher. Es könnte aber auch ein Knoten <em>(Node)</em> sein, der Audiodaten in einem <code>OfflineAudioContext </code>aufzeichnet.</p>
+</div>
+
+<p><code>AudioDestinationNode</code> hat einen Eingang und keinen Ausgang (denn er ist der Ausgang, kein weiterer Audio Node kann verlinkt werden). Die Anzahl der Kanäle des Eingangs muss zwischen null und dem Wert von <code>maxChannelCount</code> liegen, sonst wird eine <em>Exception </em>ausgelöst.</p>
+
+<p>Der <code>AudioDestinationNode</code> eines gegebenen <code>AudioContext</code> kann über das {{domxref("AudioContext.destination")}} Attribut erzeugt bzw. empfangen werden.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Anzahl Inputs</th>
+   <td><code>1</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Anzahl Outputs</th>
+   <td><code>0</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Kanalzählmethode</th>
+   <td><code>"explicit"</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Kanal Anzahl</th>
+   <td><code>2</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Kanal Interpretation</th>
+   <td><code>"speakers"</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Eigenschaften">Eigenschaften</h2>
+
+<p><em>erbt Eigenschaften von der Elternklasse, </em><em>{{domxref("AudioNode")}}</em>.</p>
+
+<dl>
+ <dt>{{domxref("AudioDestinationNode.maxChannelCount")}}</dt>
+ <dd>Ist ein <code>unsigned long</code> der die maximale Kanalzahl definiert, die das physische Gerät bedienen kann.</dd>
+</dl>
+
+<h2 id="Methoden">Methoden</h2>
+
+<p><em>Keine spezifischen Methoden; erbt die Methoden der Elternklasse, </em><em>{{domxref("AudioNode")}}</em>.</p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<p>Das Benutzen des<code> AudioDestinationNode</code> ist per Design einfach gehalten — es repräsentiert den Ausgang des physikalischen Geräts (Lautsprecher), so dass man dieses mit ein paar Zeilen Code mit einem Audiographen verbinden kann:</p>
+
+<pre class="brush: js">var audioCtx = new AudioContext();
+var source = audioCtx.createMediaElementSource(myMediaElement);
+source.connect(gainNode);
+gainNode.connect(audioCtx.destination);</pre>
+
+<p>Für ein kompletteres Beispiel, sehen Sie sich eines unserer MDN Web Audio Beispiele, wie den <a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-o-matic</a> oder das <a href="http://mdn.github.io/violent-theremin/">Violent Theremin</a> an.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</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('Web Audio API', '#the-audiodestinationnode-interface', 'AudioDestinationNode')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>14 {{property_prefix("webkit")}}</td>
+   <td>23</td>
+   <td>{{CompatNo}}</td>
+   <td>15 {{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>6 {{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>28 {{property_prefix("webkit")}}</td>
+   <td>25</td>
+   <td>1.2</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>6 {{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
+</ul>
diff --git a/files/de/web/api/audionode/index.html b/files/de/web/api/audionode/index.html
new file mode 100644
index 0000000000..8ad96dc760
--- /dev/null
+++ b/files/de/web/api/audionode/index.html
@@ -0,0 +1,191 @@
+---
+title: AudioNode
+slug: Web/API/AudioNode
+translation_of: Web/API/AudioNode
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<p>Ein <strong><code>AudioNode</code></strong> ist eine generische Schnittstelle um ein Signalverarbeitungsmodul wie z.B. ein HTML {{HTMLElement("audio")}} or {{HTMLElement("video")}} Element, ein {{domxref("OscillatorNode")}}, die Audio Destination, ein zwischengeschaltenes audio-verarbeitendes Modul wie z.B. einen {{domxref("BiquadFilterNode")}} oder {{domxref("ConvolverNode")}}), oder Lautstärkeregler (like {{domxref("GainNode")}}).</p>
+
+<p><img alt="AudioNodes participating in an AudioContext create a audio routing graph." src="https://mdn.mozillademos.org/files/9713/WebAudioBasics.png" style="display: block; height: 230px; margin: 0px auto; width: 677px;"></p>
+
+<p>Ein <code>AudioNode</code> hat Ein- und Ausgänge, jeweils mit einer gegebenen Anzahl an Kanälen.<em> </em>Einen <code>AudioNode</code> ohne Eingänge und mit einem oder mehreren Ausgängen nennt man <em>source node </em>(dt.: Quellknoten). Die Art der Signalverarbeitung in einem Audio Node variiert mit dessen Funktion. Der folgende Ablauf liegt jedoch immer zugrunde:  das Signal am Eingang wird eingelesen,  das Signal wird zu einem neuen Signal verarbeitet und an den Ausgang geleitet. In einigen Fällen, wir das Signal unverarbeitet durchgeschleust, so z.B. beim {{domxref("AnalyserNode")}}, wo das Resultat der Signalverarbeitung separat zugänglich ist.</p>
+
+<p>Mehrere Nodes können zu einem <em>Processing Graph </em>(dt.:Verarbeitungs-Netz) verbunden werden. Ein solcher Graph befindet sich immer in genau einem {{domxref("AudioContext")}}. Signal- verarbeitende Nodes erben die Eigenschaften und Methoden von <code>Audio Node</code>, implementieren aber auch eigene Funktionalität. Weitere Informationen geben die Seiten der speziellen <code>Audio Nodes</code>,  die sie auf der Homepage der <a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a> finden.</p>
+
+<div class="note">
+<p><span style="font-size: 14px; line-height: 21px;"><strong>Hinweis</strong></span>: Ein <code>AudioNode</code> kann das Ziel von Events sein, und implementiert daher die {{domxref("EventTarget")}} Schnittstelle.</p>
+</div>
+
+<h2 id="Properties" style="">Properties</h2>
+
+<dl>
+ <dt>{{domxref("AudioNode.context")}} {{readonlyInline}}</dt>
+ <dd>Liefert den assoziierten {{domxref("AudioContext")}}, der den signalverarbeitenden Graphen (processing graph) enthält, in den der Node eingebunden ist.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("AudioNode.numberOfInputs")}} {{readonlyInline}}</dt>
+ <dd>Liefert die Anzahl der Eingänge des Nodes. Source nodes (dt. Quellknoten) sind definiert als Nodes, deren <code>numberOfInputs</code> Eigenschaft einen Wert von <code>0 </code>aufweist.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("AudioNode.numberOfOutputs")}} {{readonlyInline}}</dt>
+ <dd>Liefert die Anzahl der Ausgänge des Nodes. Destination nodes (dt.: Zielknoten) — wie {{ domxref("AudioDestinationNode") }} — haben einen Wert von  <code>0</code> für diese Eigenschaft.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("AudioNode.channelCount")}}</dt>
+ <dd>Represents an integer used to determine how many channels are used when <a href="/en-US/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API#Up-mixing_and_down-mixing">up-mixing and down-mixing</a> connections to any inputs to the node. Its usage and precise definition depend on the value of {{domxref("AudioNode.channelCountMode")}}.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("AudioNode.channelCountMode")}}</dt>
+ <dd>Represents an enumerated value describing the way channels must be matched between the node's inputs and outputs.</dd>
+ <dt>{{domxref("AudioNode.channelInterpretation")}}</dt>
+ <dd>Represents an enumerated value describing the meaning of the channels. This interpretation will define how audio <a href="/en-US/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API#Up-mixing_and_down-mixing">up-mixing and down-mixing</a> will happen.<br>
+ The possible values are <code>"speakers"</code> or <code>"discrete"</code>.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>Also implements methods from the interface </em>{{domxref("EventTarget")}}.</p>
+
+<dl>
+ <dt>{{domxref("AudioNode.connect(AudioNode)")}}</dt>
+ <dd>Allows us to connect one output of this node to one input of another node.</dd>
+ <dt>{{domxref("AudioNode.connect(AudioParam)")}}</dt>
+ <dd>Allows us to connect one output of this node to one input of an audio parameter.</dd>
+ <dt>{{domxref("AudioNode.disconnect()")}}</dt>
+ <dd>Allows us to disconnect the current node from another one it is already connected to.</dd>
+</dl>
+
+<h2 id="Example">Example</h2>
+
+<p>This simple snippet of code shows the creation of some audio nodes, and how the <code>AudioNode</code> properties and methods can be used. You can find examples of such usage on any of the examples linked to on the <a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a> landing page (for example <a href="https://github.com/mdn/violent-theremin">Violent Theremin</a>.)<span class="p"> </span></p>
+
+<pre class="brush: js;highlight[8,9,11,12,13,14]">var AudioContext = window.AudioContext || window.webkitAudioContext;
+
+var audioCtx = new AudioContext();
+
+var oscillator = audioCtx.createOscillator();
+var gainNode = audioCtx.createGain();
+
+oscillator.connect(gainNode);
+gainNode.connect(audioCtx.destination);
+
+oscillator.context;
+oscillator.numberOfInputs;
+oscillator.numberOfOutputs;
+oscillator.channelCount;</pre>
+
+<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('Web Audio API', '#the-audionode-interface', 'AudioNode')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(10.0)}}{{property_prefix("webkit")}}</td>
+   <td>{{CompatGeckoDesktop(25.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>15.0{{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>channelCount</code> <code>channelCountMode</code></td>
+   <td>{{CompatVersionUnknown}} {{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>connect</code><code>(AudioParam)</code></td>
+   <td>{{CompatVersionUnknown}} {{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>25.0</td>
+   <td>1.2</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>channelCount</code><br>
+    <code>channelCountMode</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>connect</code><code>(AudioParam)</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
+</ul>
diff --git a/files/de/web/api/audiotrack/index.html b/files/de/web/api/audiotrack/index.html
new file mode 100644
index 0000000000..3ef55d93ad
--- /dev/null
+++ b/files/de/web/api/audiotrack/index.html
@@ -0,0 +1,86 @@
+---
+title: AudioTrack
+slug: Web/API/AudioTrack
+translation_of: Web/API/AudioTrack
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><span class="seoSummary">Das <strong><code>AudioTrack</code></strong> Interface stellt einen einzelnen Audiotrack aus einem der HTML-Medienelemente {{HTMLElement("audio")}} oder {{HTMLElement("video")}} dar. </span>Die häufigste Verwendung für ein <code>AudioTrack</code> Objekt ist das (De-)Aktivieren seiner Eigenschaft {{domxref("AudioTrack.enabled", "enabled")}} um den Track stummzuschalten.</p>
+
+<h2 id="Eigenschaften">Eigenschaften</h2>
+
+<dl>
+ <dt>{{domxref("AudioTrack.enabled", "enabled")}}</dt>
+ <dd>Ein Boolescher Wert, der kontrolliert ob der Sound für den Audiotrack aktiviert ist. Steht dieser Wert auf  <code>false</code>, ist der Ton stummgeschaltet.</dd>
+ <dt>{{domxref("AudioTrack.id", "id")}} {{ReadOnlyInline}}</dt>
+ <dd>Eine {{domxref("DOMString")}}, die den Track eindeutig innerhalb des Mediums identifiziert. Diese ID kann genutzt werden, um einen bestimmten Track auf einer Audio-Track-Liste durch Aufruf von {{domxref("AudioTrackList.getTrackById()")}} zu finden. Die ID kann auch als Fragment der URL genutzt werden, wenn das Medium die Suche per Medienfragment laut <a href="https://www.w3.org/TR/media-frags/">Media Fragments URI-Spezifikation</a> unterstützt.</dd>
+ <dt>{{domxref("AudioTrack.kind", "kind")}} {{ReadOnlyInline}}</dt>
+ <dd>Ein {{domxref("DOMString")}}, das bestimmt zu welcher Kategorie ein Track gehört. Der Haupt-Audiotrack hätte bspw. als <code>kind</code> die Eigenschaft <code>"main"</code>.</dd>
+ <dt>{{domxref("AudioTrack.label", "label")}} {{ReadOnlyInline}}</dt>
+ <dd>Ein {{domxref("DOMString")}}, das ein visuelles Label für den Track anzeigt. Z.B. hätte ein Audiokommentar-Track für einen Film als <code>label</code>  <code>"Kommentar mit Regisseur Max Mustermann und den Schauspielern XYZ und ZYX."</code> Dieser String bleibt leer, wenn kein Label angegeben wurde.</dd>
+ <dt>{{domxref("AudioTrack.language", "language")}} {{ReadOnlyInline}}</dt>
+ <dd>A {{domxref("DOMString")}} specifying the audio track's primary language, or an empty string if unknown. The language is specified as a BCP 47 ({{RFC(5646)}}) language code, such as <code>"en-US"</code> or <code>"pt-BR"</code>.</dd>
+ <dt>{{domxref("AudioTrack.sourceBuffer", "sourceBuffer")}} {{ReadOnlyInline}}</dt>
+ <dd>The {{domxref("SourceBuffer")}} that created the track. Returns null if the track was not created by a {{domxref("SourceBuffer")}} or the {{domxref("SourceBuffer")}} has been removed from the {{domxref("MediaSource.sourceBuffers")}} attribute of its parent media source.</dd>
+</dl>
+
+<h2 id="Usage_notes">Usage notes</h2>
+
+<p>To get an <code>AudioTrack</code> for a given media element, use the element's {{domxref("HTMLMediaElement.audioTracks", "audioTracks")}} property, which returns an {{domxref("AudioTrackList")}} object from which you can get the individual tracks contained in the media:</p>
+
+<pre class="brush: js">var el = document.querySelector("video");
+var tracks = el.audioTracks;
+</pre>
+
+<p>You can then access the media's individual tracks using either array syntax or functions such as {{jsxref("Array.forEach", "forEach()")}}.</p>
+
+<p>This first example gets the first audio track on the media:</p>
+
+<pre class="brush: js">var firstTrack = tracks[0];</pre>
+
+<p>The next example scans through all of the media's audio tracks, enabling any that are in the user's preferred language (taken from a variable <code>userLanguage</code>) and disabling any others.</p>
+
+<pre class="brush: js">tracks.forEach(function(track) {
+  if (track.language === userLanguage) {
+    track.enabled = true;
+  } else {
+    track.enabled = false;
+  }
+});
+</pre>
+
+<p>The {{domxref("AudioTrack.language", "language")}} is in standard ({{RFC(5646)}}) format. For US English, this would be <code>"en-US"</code>, for example.</p>
+
+<h2 id="Example">Example</h2>
+
+<p>{{page("/en-US/docs/Web/API/AudioTrack/label", "Example")}}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'media.html#audiotrack', 'AudioTrack')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#audiotrack', 'AudioTrack')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.AudioTrack")}}</p>
diff --git a/files/de/web/api/battery_status_api/index.html b/files/de/web/api/battery_status_api/index.html
new file mode 100644
index 0000000000..498c8bb6ae
--- /dev/null
+++ b/files/de/web/api/battery_status_api/index.html
@@ -0,0 +1,92 @@
+---
+title: Battery Status API
+slug: Web/API/Battery_Status_API
+translation_of: Web/API/Battery_Status_API
+---
+<p>{{DefaultAPISidebar("Battery API")}}{{Obsolete_Header}}</p>
+
+<p>Die <strong>Battery Status API</strong>, oder kurz <strong>Battery API</strong>, stellt Informationen über den Ladezustand der Systembatterie zur Verfügung. Diese Informationen können zur Anpassung der Ressourcennutzung verwendet werden. Wenn nur noch wenig Energie zur Verfügung steht, sollten unnötige Operationen eingestellt werden, damit die Laufzeit erhöht wird. Oder aber der Zustand gespeichert werden, damit ein Datenverlust verhindert werden kann.</p>
+
+<p>Die Battery Status API erweitert  {{domxref("window.navigator")}} mit einer Methode  {{domxref("navigator.getBattery()")}}, die ein Promise mit einem  {{domxref("BatteryManager")}} Objekt liefert, sowie einigen Nachrichten zum Überwachen des Batteriestatus.</p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<p>In diesem Beispiel wird der Ladezustand (Netz, ladend, etc.) und Änderungen des Batterieniveaus und der Zeit überwacht. Dies erfolgt durch Überwachen der Events:  {{event("chargingchange")}}, {{event("levelchange")}} und {{event("chargingtimechange")}}, {{event("dischargingtimechange")}}.</p>
+
+<pre class="brush: js;">navigator.getBattery().then(function(battery) {
+  function updateAllBatteryInfo(){
+    updateChargeInfo();
+    updateLevelInfo();
+    updateChargingInfo();
+    updateDischargingInfo();
+  }
+  updateAllBatteryInfo();
+
+  battery.addEventListener('chargingchange', function(){
+    updateChargeInfo();
+  });
+  function updateChargeInfo(){
+    console.log("Battery charging? "
+                + (battery.charging ? "Yes" : "No"));
+  }
+
+  battery.addEventListener('levelchange', function(){
+    updateLevelInfo();
+  });
+  function updateLevelInfo(){
+    console.log("Battery level: "
+                + battery.level * 100 + "%");
+  }
+
+  battery.addEventListener('chargingtimechange', function(){
+    updateChargingInfo();
+  });
+  function updateChargingInfo(){
+    console.log("Battery charging time: "
+                 + battery.chargingTime + " seconds");
+  }
+
+  battery.addEventListener('dischargingtimechange', function(){
+    updateDischargingInfo();
+  });
+  function updateDischargingInfo(){
+    console.log("Battery discharging time: "
+                 + battery.dischargingTime + " seconds");
+  }
+
+});
+</pre>
+
+<p>Siehe auch die <a class="external" href="http://www.w3.org/TR/battery-status/#examples">Beispiel in der Spezifikation</a>.</p>
+
+<h2 id="Spezifikationen">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("Battery API")}}</td>
+   <td>{{Spec2("Battery API")}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<div class="hidden">Die Kompatibilitätstabelle auf dieser Seite wird aus strukturierten Daten generiert. Beteiligung ist über <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> möglich, bitte schickt uns einen "pull request" Anfrage.</div>
+
+<p>{{Compat("api.BatteryManager")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/en-US/Apps/Build/gather_and_modify_data/retrieving_battery_status_information">Batterie Statusinformationen abrufen - Beispiel und Artikel</a></li>
+ <li><a class="external" href="http://hacks.mozilla.org/2012/02/using-the-battery-api-part-of-webapi/">Hacks blog post - Nutzung der Battery API</a></li>
+</ul>
diff --git a/files/de/web/api/blob/index.html b/files/de/web/api/blob/index.html
new file mode 100644
index 0000000000..352c978ac5
--- /dev/null
+++ b/files/de/web/api/blob/index.html
@@ -0,0 +1,245 @@
+---
+title: Blob
+slug: Web/API/Blob
+tags:
+  - API
+  - Files
+  - Reference
+  - TopicStub
+  - checkTranslation
+translation_of: Web/API/Blob
+---
+<p>{{ APIRef("File API") }}</p>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Ein <code>Blob</code> ist eine dateiähnliche Menge unveränderlicher Roh-Daten, die nicht notwendigerweise native JavaScript-Daten enthalten. Das {{ domxref("File") }}-Interface basiert auf <code>Blob</code> und erweitert dessen Funktionen und die Unterstützung von Dateien auf dem System des Nutzers.</p>
+
+<p>Eine einfache Methode, um einen Blob zu erstellen, ist der Aufruf des {{domxref("Blob.Blob", "Blob()")}}-Konstruktors. Anders ist es auch mit Hilfe eines Aufrufs von <code>slice()</code> möglich, einen Ausschnitt aus einem anderen Blob zu erhalten.</p>
+
+<p>Die APIs, welche Blob-Objekte akzeptieren, werden ebenfalls in der {{domxref("File")}}-Dokumentation genannt.</p>
+
+<div class="note">
+<p>Note: The <code>slice()</code> method had initially taken <code>length</code> as the second argument to indicate the number of bytes to copy into the new <code>Blob</code>. If you specified values such that <code>start + length</code>exceeded the size of the source <code>Blob</code>, the returned <code>Blob</code> contained data from the start index to the end of the source <code>Blob</code>.</p>
+</div>
+
+<div class="note">
+<p>Zu beachten: Der <code>slice()-</code>Methode kann in manchen Browsern (und Versionen) ein Vendor-Präfix vorangestellt sein. Firefox 12 und früher: <code>blob.mozSlice()</code>. Safari: <code>blob.webkitSlice()</code>. Eine alte Version von <code>slice()</code> ohne Vendor-Präfix ist überholt. Die Unterstützung von <code>blob.mozSlice()</code> wurde mit Firefox 30 eingestellt.</p>
+</div>
+
+<h2 id="Konstruktor">Konstruktor</h2>
+
+<dl>
+ <dt>{{domxref("Blob.Blob", "Blob()")}}</dt>
+ <dd>Gibt einen neuen <code>Blob</code> zurück, dessen Inhalt das als Parameter übergebene Array in zusammengesetzter Form ist.</dd>
+</dl>
+
+<h2 id="Eigenschaften">Eigenschaften</h2>
+
+<dl>
+ <dt>{{domxref("Blob.isClosed")}} {{readonlyinline}} {{experimental_inline}}</dt>
+ <dd>Gibt einen booleschen Wert zurück, der anzeigt, ob die {{domxref("Blob.close()")}}-Methode zu diesem <code>Blob</code> bereits aufgerufen wurde. Geschlossene Blobs können nicht mehr ausgelesen werden.</dd>
+ <dt>{{domxref("Blob.size")}} {{readonlyinline}}</dt>
+ <dd>Gibt die Größe des <code>Blob</code>-Inhalts in Bytes zurück.</dd>
+ <dt>{{domxref("Blob.type")}} {{readonlyinline}}</dt>
+ <dd>Ein <code>String,</code> der den MIME-Typ enthält. Ist der Typ unbekannt, ist der Rückgabe-String leer.</dd>
+</dl>
+
+<h2 id="Methoden">Methoden</h2>
+
+<dl>
+ <dt>{{domxref("Blob.close()")}} {{experimental_inline}}</dt>
+ <dd>Schließt das <code>Blob</code>-Objekt und gibt gegebenenfalls reservierte Ressourcen frei.</dd>
+ <dt>{{domxref("Blob.slice()", "Blob.slice([start[, end[, contentType]]])")}}</dt>
+ <dd>Gibt ein neues <code>Blob-Objekt</code> zurück, das die spezifierte Menge an Daten enthält.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele:</h2>
+
+<h3 id="Beispielanwendung_des_Blob-Konstruktors">Beispielanwendung des Blob-Konstruktors</h3>
+
+<p>Der {{domxref("Blob.Blob", "Blob() constructor")}} ermöglicht es, <code>Blobs</code> aus Objekten zu erzeugen. Beispielsweise kann man einen <code>Blob</code> von einem String-Objekt erzeugen:</p>
+
+<pre><code>var debug = {hello: "world"};
+var blob = new Blob([JSON.stringify(debug, null, 2)], {type : 'application/json'});</code>
+</pre>
+
+<div class="warning">
+<p>{{ domxref("BlobBuilder") }} bietet noch eine weitere Möglichkeit Blobs zu erstellen, welche mittlerweile allerdings veraltet ist und nicht mehr genutzt werden sollte.</p>
+
+<div class="syntaxbox">
+<pre class="brush: js">var builder = new BlobBuilder();
+var fileParts = ['&lt;a id="a"&gt;&lt;b id="b"&gt;hey!&lt;/b&gt;&lt;/a&gt;'];
+builder.append(fileParts[0]);
+var myBlob = builder.getBlob('text/xml');</pre>
+</div>
+</div>
+
+<h3 id="Erstellen_einer_URL_für_ein_typed_array_durch_einen_Blob">Erstellen einer URL für ein "typed array" durch einen Blob</h3>
+
+<p>Beispiel-Code:</p>
+
+<pre class="brush: js">var typedArray = EinTypedArrayErstellen();
+var blob = new Blob([typedArray], {type: 'application/octet-binary'}); // ein gültiger MIME-Typ
+var url = URL.createObjectURL(blob);
+// Die URL wird etwa so sein: blob:d3958f5c-0777-0845-9dcf-2cb28783acaf
+// Nun kann die URL überall genutzt werden, wo URLs verwendung finden, z.B. in Bildquellen (image.src)
+</pre>
+
+<h3 id="Daten_aus_einem_Blob_lesen">Daten aus einem Blob lesen</h3>
+
+<p>Um Daten aus einem Blob zu lesen, muss ein {{domxref("FileReader")}} genutzt werden. Der folgende Code liest den Inhalt eines Blobs als ein typisiertes Array aus.</p>
+
+<pre class="brush: js">var reader = new FileReader();
+reader.addEventListener("loadend", function() {
+   // reader.result beinhaltet den Inhalt des Blobs
+});
+reader.readAsArrayBuffer(blob);</pre>
+
+<p>Über eine andere Methode von {{domxref("FileReader")}} ist es möglich, den Inhalt eines Blobs als String oder Data-URL zu lesen.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Hinweis</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('File API','#blob','Blob')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td>Grundlegende Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser-Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<table>
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>5[1]</td>
+   <td>4[2]</td>
+   <td>10</td>
+   <td>11.10[1]</td>
+   <td>5.1[1]</td>
+  </tr>
+  <tr>
+   <td><code>slice()</code></td>
+   <td>10 {{property_prefix("webkit")}}<br>
+    21</td>
+   <td>5 {{property_prefix("moz")}}[3]<br>
+    13</td>
+   <td>10</td>
+   <td>12</td>
+   <td>5.1 {{property_prefix("webkit")}}</td>
+  </tr>
+  <tr>
+   <td><code>Blob()</code>constructor</td>
+   <td>20</td>
+   <td>{{CompatGeckoDesktop("13.0")}}</td>
+   <td>10</td>
+   <td>12.10</td>
+   <td>6</td>
+  </tr>
+  <tr>
+   <td><code>close()</code>and <code>isClosed</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}[4]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<table>
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("13.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>slice()</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>Blob()</code>constructor</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>close()</code>and <code>isClosed</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}[4]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}<br>
+     </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Anmerkung_zur_slice()-Implementierung">Anmerkung zur slice()-Implementierung</h3>
+
+<p>[1] Eine Version von <code>slice()</code>, die als zweites Argument die gewünschte Größe enthält, war in <a href="http://trac.webkit.org/changeset/55670">WebKit</a> und <a href="http://www.opera.com/docs/specs/presto28/file/#blob">Opera 11.10</a> implementiert. Da sich jedoch diese Syntax von {{jsxref("Array/slice", "Array.slice()")}} und {{jsxref("String/slice", "String.slice()")}} unterschied, wurde die Unterstützung in WebKit fallen gelassen zu Gunsten der neuen Syntax von <code><a href="http://trac.webkit.org/changeset/83873">Blob.webkitSlice()</a>.</code></p>
+
+<p>[2] Eine Variante von <code>slice()</code>, die als zweites Argument die gewünschte Größe enthält, war in <a href="https://hg.mozilla.org/mozilla-central/rev/1b3947ed93c6">Firefox 4</a> verfügbar. Da sich jedoch diese Syntax von {{jsxref("Array/slice", "Array.slice()")}} und {{jsxref("String/slice", "String.slice()")}} unterschied, wurde diese Unterstützung in Gecko fallen gelassen zu Gunsten der neuen Syntax von <code>mozSlice()</code>.</p>
+
+<p>[3] Vor Gecko 12.0 {{ geckoRelease("12.0") }} trat ein Fehler im Verhalten von slice() auf; die erste und letzte Position außerhalb des Bereichs von 64-Bit-Werten wurden fehlerhaft verarbeitet, was nun für vorzeichenlose 64-Bit-Werte behoben wurde.</p>
+
+<p>[4] Siehe {{bug("1048325")}}</p>
+
+<h3 id="Anmerkungen_zu_Gecko">Anmerkungen zu Gecko</h3>
+
+<p>Vor Gecko 12.0 {{ geckoRelease("12.0") }} gab es einen Bug, der das Verhalten von {{ manch("slice") }} beinflusste. Bei Start- und Endpositionen außerhalb von vorzeichenbehafteten 64-Bit-Werten funktionierte die Methode nicht. Dieser Bug wurde mittlerweile behoben und vorzeichenlose 64-Bit-Werte sind nun möglich.</p>
+
+<h2 id="Chrome_Code_-_Scope">Chrome Code - Scope</h2>
+
+<p>Um Blobs im Chrome Code, JSM und Bootstrap Scope zu verwenden, müssen sie folgendermaßen importiert werden:</p>
+
+<pre class="brush: js">Cu.importGlobalProperties(['Blob']);
+</pre>
+
+<p><code>Blobs</code> sind auch in Worker-Scopes verfügbar.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{ domxref("BlobBuilder") }}</li>
+ <li>{{ domxref("File") }}</li>
+ <li>{{ domxref("URL.createObjectURL") }}</li>
+ <li><a href="/en-US/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li>
+</ul>
diff --git a/files/de/web/api/body/arraybuffer/index.html b/files/de/web/api/body/arraybuffer/index.html
new file mode 100644
index 0000000000..7550dfadc8
--- /dev/null
+++ b/files/de/web/api/body/arraybuffer/index.html
@@ -0,0 +1,87 @@
+---
+title: Body.arrayBuffer()
+slug: Web/API/Body/arrayBuffer
+translation_of: Web/API/Body/arrayBuffer
+---
+<div>{{APIRef("Fetch")}}</div>
+
+<p>Die Methode <strong><code>arrayBuffer()</code></strong> des {{domxref("Body")}} Mixin nimmt einen {{domxref("Response")}} Stream und liest ihn bis zum Ende. Sie gibt ein Promise zurück, welches in einen {{domxref("ArrayBuffer")}} aufgelöst wird.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: js">response.arrayBuffer().then(function(buffer) {
+  // mach etwas mit dem Buffer
+});</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<p>Keine.</p>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Ein Promise, welches in einen {{domxref("ArrayBuffer")}} aufgelöst wird.</p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<p>In unserem <a href="https://mdn.github.io/fetch-examples/fetch-array-buffer/">Live-Beispiel zum Abruf eines Array Buffers</a> haben wir einen Wiedergabe-Knopf. Bei einem Klick darauf wird die Funktion <code>getData()</code> ausgeführt. Beachten Sie, dass vor der Wiedergabe die ganze Audio-Datei heruntergeladen wird. Benötigen Sie eine Wiedergabe noch während des Downloads (Streaming) ziehen Sie {{domxref("HTMLAudioElement")}} in Betracht:</p>
+
+<pre class="brush: js">new Audio(music.ogg).play()
+</pre>
+
+<p>In <code>getData()</code> erstellen wir eine neue Anfrage mit dem {{domxref("Request.Request")}} Konstruktor, um dann einen OGG Musik-Track abzurufen. Wir benutzen ebenfalls {{domxref("AudioContext.createBufferSource")}} um eine Audio-Puffer-Quelle zu erstellen. Ist der Abruf erfolgreich, lesen wir mit <code>arrayBuffer()</code> einen {{domxref("ArrayBuffer")}} aus der Antwort, dekodieren die Audiodaten mit {{domxref("AudioContext.decodeAudioData")}}, setzen die dekodierten Daten als Quelle für den Audio-Puffer fest und verbinden die Quelle mit {{domxref("AudioContext.destination")}}.</p>
+
+<p>Wenn <code>getData()</code> durchgelaufen ist, starten wir die Wiedergabe mit <code>start(0)</code> und deaktivieren den Wiedergabe-Knopf, damit er nicht erneut geklickt werden kann, während die Wiedergabe läuft (was zu einem Fehler führen würde).</p>
+
+<pre class="brush: js">function getData() {
+  source = audioCtx.createBufferSource();
+
+  var myRequest = new Request('viper.ogg');
+
+  fetch(myRequest).then(function(response) {
+    return response.arrayBuffer();
+  }).then(function(buffer) {
+    audioCtx.decodeAudioData(buffer, function(decodedData) {
+      source.buffer = decodedData;
+      source.connect(audioCtx.destination);
+    });
+  });
+};
+
+// Knöpfe zum Abspielen und Anhalten verknüpfen
+
+play.onclick = function() {
+  getData();
+  source.start(0);
+  play.setAttribute('disabled', 'disabled');
+}</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</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('Fetch','#dom-body-arraybuffer','arrayBuffer()')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("api.Body.arrayBuffer")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/de/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
+ <li><a href="/de/docs/Web/HTTP">HTTP</a></li>
+</ul>
diff --git a/files/de/web/api/body/blob/index.html b/files/de/web/api/body/blob/index.html
new file mode 100644
index 0000000000..53595fdbda
--- /dev/null
+++ b/files/de/web/api/body/blob/index.html
@@ -0,0 +1,73 @@
+---
+title: Body.blob()
+slug: Web/API/Body/blob
+translation_of: Web/API/Body/blob
+---
+<div>{{APIRef("Fetch")}}</div>
+
+<p>Die Methode <strong><code>blob()</code></strong> des {{domxref("Body")}} Mixin nimmt einen {{domxref("Response")}} Stream und liest ihn bis zum Ende. Sie gibt ein Promise zurück, welches in einen {{domxref("Blob")}} aufgelöst wird.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: js">response.blob().then(function(myBlob) {
+  // mach etwas mit myBlob
+});</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<p>Keine.</p>
+
+<div class="note"><strong>Hinweis:</strong> Wenn die {{domxref("Response")}} vom {{domxref("Response.type")}} her <code>"opaque"</code> ist, hat der resultierende {{domxref("Blob")}} eine {{domxref("Blob.size")}} von <code>0</code> und einen {{domxref("Blob.type")}} eines leeren Strings <code>""</code>, wodurch er für Methoden wie {{domxref("URL.createObjectURL")}} <em>unbrauchbar</em> wird.</div>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Ein Promise, welches in einen {{domxref("Blob")}} aufgelöst wird.</p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<p>In unserem <a href="https://github.com/mdn/fetch-examples/tree/master/fetch-request">Beispiel für eine Fetch Anfrage</a> (<a href="http://mdn.github.io/fetch-examples/fetch-request/">live ausführen</a>) erstellen wir eine neue Anfrage mit dem {{domxref("Request.Request")}} Konstruktor und rufen dann ein JPG ab. Wenn der Abruf erfolgreich ist, lesen wir mit <code>blob()</code> einen {{domxref("Blob")}} aus der Antwort, fügen ihn mit {{domxref("URL.createObjectURL")}} in eine Objekt-URL ein und legen diese URL als Quelle für das {{htmlelement("img")}} Element zum Anzeigen des Bildes fest.</p>
+
+<pre class="brush: js">var myImage = document.querySelector('img');
+
+var myRequest = new Request('flowers.jpg');
+
+fetch(myRequest)
+.then(function(response) {
+  return response.blob();
+})
+.then(function(myBlob) {
+  var objectURL = URL.createObjectURL(myBlob);
+  myImage.src = objectURL;
+});
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</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('Fetch','#dom-body-blob','blob()')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("api.Body.blob")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/de/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
+ <li><a href="/de/docs/Web/HTTP">HTTP</a></li>
+</ul>
diff --git a/files/de/web/api/body/body/index.html b/files/de/web/api/body/body/index.html
new file mode 100644
index 0000000000..cbe7484d91
--- /dev/null
+++ b/files/de/web/api/body/body/index.html
@@ -0,0 +1,86 @@
+---
+title: Body.body
+slug: Web/API/Body/body
+translation_of: Web/API/Body/body
+---
+<div>{{APIRef("Fetch")}}{{seecompattable}}</div>
+
+<p>Die schreibgeschützte <strong><code>body</code></strong> Eigenschaft des {{domxref("Body")}} Mixin ist ein einfacher Getter, der dazu benutzt wird den Inhalt des Body als {{domxref("ReadableStream")}} bereitzustellen.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: js">var stream = responseInstance.body;</pre>
+
+<h3 id="Wert">Wert</h3>
+
+<p>Ein {{domxref("ReadableStream")}}.</p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<p>In unserem einfachen <a href="https://mdn.github.io/dom-examples/streams/simple-pump.html">Stream-Pump-Beispiel</a> rufen wir ein Bild ab, machen den Antwort-Stream mit <code>response.body</code> sichtbar, erstellen einen Reader mit {{domxref("ReadableStream.getReader()")}} und reihen die Teile des Streams in einen zweiten, benutzerdefinierten, lesbaren Stream — wodurch wie eine exakte Kopie des Bilds erhalten.</p>
+
+<pre class="brush: js">const image = document.getElementById('target');
+
+// Bild holen
+fetch('./tortoise.png')
+// Body als ReadableStream abrufen
+.then(response =&gt; response.body)
+.then(body =&gt; {
+  const reader = body.getReader();
+
+  return new ReadableStream({
+    start(controller) {
+      return pump();
+
+      function pump() {
+        return reader.read().then(({ done, value }) =&gt; {
+          // Stream schließen, wenn keine weiteren Daten verarbeitet werden müssen
+          if (done) {
+            controller.close();
+            return;
+          }
+
+          // Das nächste Datenstück in unseren Ziel-Stream einreihen
+          controller.enqueue(value);
+          return pump();
+        });
+      }
+    }
+  })
+})
+.then(stream =&gt; new Response(stream))
+.then(response =&gt; response.blob())
+.then(blob =&gt; URL.createObjectURL(blob))
+.then(url =&gt; console.log(image.src = url))
+.catch(err =&gt; console.error(err));</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</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('Fetch','#dom-body-body','body')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("api.Body.body")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/API/Fetch_API">Fetch API</a></li>
+ <li><a href="/de/docs/Web/API/Streams_API">Streams API</a></li>
+ <li><a href="/de/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+</ul>
diff --git a/files/de/web/api/body/bodyused/index.html b/files/de/web/api/body/bodyused/index.html
new file mode 100644
index 0000000000..052e8fcc7c
--- /dev/null
+++ b/files/de/web/api/body/bodyused/index.html
@@ -0,0 +1,73 @@
+---
+title: Body.bodyUsed
+slug: Web/API/Body/bodyUsed
+translation_of: Web/API/Body/bodyUsed
+---
+<div>{{APIRef("Fetch")}}</div>
+
+<p>Die schreibgeschützte <strong><code>bodyUsed</code></strong> Eigenschaft des {{domxref("Body")}} Mixin enthält einen {{domxref("Boolean")}} der angibt, ob der Body schon eingelesen wurde.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: js">var myBodyUsed = response.bodyUsed;</pre>
+
+<h3 id="Wert">Wert</h3>
+
+<p>Ein {{domxref("Boolean")}}.</p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<p>In unserem <a href="https://github.com/mdn/fetch-examples/tree/master/fetch-request">Beispiel für eine Fetch Anfrage</a> (<a href="http://mdn.github.io/fetch-examples/fetch-request/">live ausführen</a>) erstellen wir eine neue Anforderung mit dem {{domxref("Request.Request")}} Konstruktor und rufen dann ein JPG ab. Wenn der Abruf erfolgreich ist, lesen wir mit <code>blob()</code> einen {{domxref("Blob")}} aus der Antwort, fügen ihn mit {{domxref("URL.createObjectURL")}} in eine Objekt-URL ein und legen diese URL als Quelle für das {{htmlelement("img")}} Element zum Anzeigen des Bildes fest.</p>
+
+<p>Beachten Sie, dass wir <code>response.bodyUsed</code> vor dem Aufruf von <code>response.blob ()</code> und einmal danach in der Konsole protokollieren. Dies gibt vorher <code>false</code> zurück und anschließend <code>true</code>, da der Body ab diesem Punkt gelesen wurde.</p>
+
+<h3 id="HTML_Inhalt">HTML Inhalt</h3>
+
+<pre class="brush: html">&lt;img class="my-image" src="https://wikipedia.org/static/images/project-logos/frwiki-1.5x.png"&gt;
+</pre>
+
+<h3 id="JavaScript_Inhalt">JavaScript Inhalt</h3>
+
+<pre class="brush: js">var myImage = document.querySelector('.my-image');
+fetch('https://upload.wikimedia.org/wikipedia/commons/7/77/Delete_key1.jpg').then(function(response) {
+    console.log(response.bodyUsed);
+    var res = response.blob();
+    console.log(response.bodyUsed);
+    return res;
+}).then(function(response) {
+    var objectURL = URL.createObjectURL(response);
+    myImage.src = objectURL;
+});</pre>
+
+<p>{{ EmbedLiveSample('Example', '100%', '250px') }}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</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('Fetch','#dom-body-bodyused','bodyUsed')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("api.Body.bodyUsed")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/de/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
+ <li><a href="/de/docs/Web/HTTP">HTTP</a></li>
+</ul>
diff --git a/files/de/web/api/body/formdata/index.html b/files/de/web/api/body/formdata/index.html
new file mode 100644
index 0000000000..4ceb02aeb4
--- /dev/null
+++ b/files/de/web/api/body/formdata/index.html
@@ -0,0 +1,62 @@
+---
+title: Body.formData()
+slug: Web/API/Body/formData
+translation_of: Web/API/Body/formData
+---
+<div>{{APIRef("Fetch")}}</div>
+
+<p>Die Methode <strong><code>formData()</code></strong> des {{domxref("Body")}} Mixin nimmt einen {{domxref("Response")}} Stream und liest ihn bis zum Ende. Sie gibt ein Promise zurück, welches in ein {{domxref("FormData")}} Objekt aufgelöst wird.</p>
+
+<div class="note">
+<p><strong>Hinweis:</strong> Dies ist hauptsächlich für <a href="/de/docs/Web/API/ServiceWorker_API">Service Worker</a> relevant. Wenn ein Benutzer ein Formular absendet und ein Service Worker die Anfrage abfängt, könnten Sie bspw. <code>formData()</code> aufrufen, um eine Key-Value-Abbildung zu erhalten, einige Felder zu modifizieren und das Formular dann an den Server weiterzuschicken (oder lokal zu benutzen).</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">response.formData()
+.then(function(formdata) {
+  // machen Sie etwas mit Ihren Formulardaten
+});</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<p>Keine.</p>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Ein Promise, welches in ein {{domxref("FormData")}} Objekt aufgelöst wird.</p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<p>Wird nachgereicht.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</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('Fetch','#dom-body-formdata','formData()')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("api.Body.formData")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/de/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
+ <li><a href="/de/docs/Web/HTTP">HTTP</a></li>
+</ul>
diff --git a/files/de/web/api/body/index.html b/files/de/web/api/body/index.html
new file mode 100644
index 0000000000..3693a73653
--- /dev/null
+++ b/files/de/web/api/body/index.html
@@ -0,0 +1,99 @@
+---
+title: Body
+slug: Web/API/Body
+tags:
+  - API
+  - BODY
+  - Experimental
+  - Fetch
+  - Fetch API
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - request
+translation_of: Web/API/Body
+---
+<div>{{ APIRef("Fetch") }}</div>
+
+<p><span class="seoSummary">The <strong><code>Body</code></strong> {{glossary("mixin")}} of the <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a> represents the body of the response/request, allowing you to declare what its content type is and how it should be handled.</span></p>
+
+<p><code>Body</code> is implemented by both {{domxref("Request")}} and {{domxref("Response")}}. This provides these objects with an associated <dfn>body</dfn> (a <a href="/en-US/docs/Web/API/Streams_API">stream</a>), a <dfn>used flag</dfn> (initially unset), and a <dfn>MIME type</dfn> (initially the empty byte sequence).</p>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt>{{domxref("Body.body")}} {{readonlyInline}}</dt>
+ <dd>A simple getter used to expose a {{domxref("ReadableStream")}} of the body contents.</dd>
+ <dt>{{domxref("Body.bodyUsed")}} {{readonlyInline}}</dt>
+ <dd>A {{domxref("Boolean")}} that indicates whether the body has been read.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{domxref("Body.arrayBuffer()")}}</dt>
+ <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with an {{domxref("ArrayBuffer")}}.</dd>
+ <dt>{{domxref("Body.blob()")}}</dt>
+ <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("Blob")}}.</dd>
+ <dt>{{domxref("Body.formData()")}}</dt>
+ <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("FormData")}} object.</dd>
+ <dt>{{domxref("Body.json()")}}</dt>
+ <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with the result of parsing the body text as {{jsxref("JSON")}}.</dd>
+ <dt>{{domxref("Body.text()")}}</dt>
+ <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("USVString")}} (text). The response is <em>always</em> decoded using UTF-8.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>The example below uses a simple fetch call to grab an image and display it in an {{htmlelement("img")}} tag. You'll notice that since we are requesting an image, we need to run {{domxref("Body.blob","Body.blob()")}} ({{domxref("Response")}} implements body) to give the response its correct MIME type.</p>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html">&lt;img class="my-image" src="https://wikipedia.org/static/images/project-logos/frwiki-1.5x.png"&gt;
+</pre>
+
+<h3 id="JS_Content">JS Content</h3>
+
+<pre class="brush: js">const myImage = document.querySelector('.my-image');
+fetch('https://upload.wikimedia.org/wikipedia/commons/7/77/Delete_key1.jpg')
+	.then(res =&gt; res.blob())
+	.then(res =&gt; {
+		const objectURL = URL.createObjectURL(res);
+		myImage.src = objectURL;
+});</pre>
+
+<p>{{ EmbedLiveSample('Examples', '100%', '250px') }}</p>
+
+<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('Fetch','#body-mixin','Body')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Body")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
+ <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/de/web/api/body/json/index.html b/files/de/web/api/body/json/index.html
new file mode 100644
index 0000000000..76271e680d
--- /dev/null
+++ b/files/de/web/api/body/json/index.html
@@ -0,0 +1,73 @@
+---
+title: Body.json()
+slug: Web/API/Body/json
+translation_of: Web/API/Body/json
+---
+<div>{{APIRef("Fetch")}}</div>
+
+<p>Die Methode <strong><code>json()</code></strong> des {{domxref("Body")}} Mixin nimmt einen {{domxref("Response")}} Stream und liest ihn bis zum Ende. Sie gibt ein Promise zurück, welches den Inhalt des Body als {{jsxref("JSON")}} einliest.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: js">response.json().then(function(data) {
+  // mach etwas mit data
+});</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<p>Keine.</p>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Ein Promise, welches den Inhalt des Body als {{jsxref("JSON")}} einliest. Dies kann alles sein, was als JSON abgebildet werden kann — ein Objekt, ein Array, ein String, eine Zahl...</p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<p>In unserem <a href="https://github.com/mdn/fetch-examples/tree/master/fetch-json">Beispiel für den Abruf eines json</a> (<a href="https://mdn.github.io/fetch-examples/fetch-json/">live ausführen</a>) erstellen wir eine neue Anfrage mit dem {{domxref("Request.Request")}} Konstruktor und rufen dann eine <code>.json</code> Datei ab. Wenn der Abruf erfolgreich ist lesen wir die Daten ein und parsen sie mit <code>json()</code>, lesen die Werte erwartungsgemäß aus und fügen sie in eine Liste ein um unsere Produktdaten anzuzeigen.</p>
+
+<pre class="brush: js">var myList = document.querySelector('ul');
+
+var myRequest = new Request('products.json');
+
+fetch(myRequest)
+  .then(function(response) { return response.json(); })
+  .then(function(data) {
+    for (var i = 0; i &lt; data.products.length; i++) {
+      var listItem = document.createElement('li');
+      listItem.innerHTML = '&lt;strong&gt;' + data.products[i].Name + '&lt;/strong&gt; befindet sich in ' +
+                           data.products[i].Location +
+                           '. Preis: &lt;strong&gt;' + data.products[i].Price + '€&lt;/strong&gt;';
+      myList.appendChild(listItem);
+    }
+  });</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</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('Fetch','#dom-body-json','json()')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("api.Body.json")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/de/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
+ <li><a href="/de/docs/Web/HTTP">HTTP</a></li>
+</ul>
diff --git a/files/de/web/api/body/text/index.html b/files/de/web/api/body/text/index.html
new file mode 100644
index 0000000000..8ccc5fb358
--- /dev/null
+++ b/files/de/web/api/body/text/index.html
@@ -0,0 +1,80 @@
+---
+title: Body.text()
+slug: Web/API/Body/text
+translation_of: Web/API/Body/text
+---
+<div>{{APIRef("Fetch")}}</div>
+
+<p>Die Methode <strong><code>text()</code></strong> des {{domxref("Body")}} Mixin nimmt einen {{domxref("Response")}} Stream und liest ihn bis zum Ende. Sie gibt ein Promise zurück, welches in ein {{domxref("USVString")}} Objekt (Text) aufgelöst wird. Die Antwort wird <em>immer</em> mit UTF-8 dekodiert.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: js">response.text().then(function (text) {
+  // do something with the text response
+});</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<p>Keine.</p>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Ein Promise, welches in einen {{domxref("USVString")}} aufgelöst wird.</p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<p>In unserem <a href="https://github.com/mdn/fetch-examples/tree/master/fetch-text">Beispiel für den Abruf von Text</a> (<a href="https://mdn.github.io/fetch-examples/fetch-text/">live ausführen</a>) haben wir ein {{htmlelement("article")}} Element und drei Links (im Array <code>myLinks</code> gespeichert). Zuerst durchlaufen wir all diese, damit alle einen <code>onclick</code> Event Handler bekommen, der die Funktion <code>getData()</code> ausführt — der Bezeichner <code>data-page</code> des Links wird dabei als Argument übergeben — wenn einer der Links geklickt wird.</p>
+
+<p>Wenn <code>getData()</code> ausgeführt wird erstellen wie eine Anfrage mit dem {{domxref("Request.Request")}} Konstruktor und rufen dann eine <code>.txt</code> Datei ab. Wenn der Abruf erfolgreich ist lesen wir das {{jsxref("USVString")}} (Text) Objekt aus der Antwort mit <code>text()</code> und setzen dann {{domxref("Element.innerHTML","innerHTML")}} des {{htmlelement("article")}} Elements auf den Wert des Text-Objekts.</p>
+
+<pre class="brush: js">var myArticle = document.querySelector('article');
+var myLinks = document.querySelectorAll('ul a');
+
+for(i = 0; i &lt;= myLinks.length-1; i++) {
+  myLinks[i].onclick = function(e) {
+    e.preventDefault();
+    var linkData = e.target.getAttribute('data-page');
+    getData(linkData);
+  }
+};
+
+function getData(pageId) {
+  console.log(pageId);
+  var myRequest = new Request(pageId + '.txt');
+  fetch(myRequest).then(function(response) {
+    return response.text().then(function(text) {
+      myArticle.innerHTML = text;
+    });
+  });
+}</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</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('Fetch','#dom-body-text','text()')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("api.Body.text")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/de/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
+ <li><a href="/de/docs/Web/HTTP">HTTP</a></li>
+</ul>
diff --git a/files/de/web/api/cache/add/index.html b/files/de/web/api/cache/add/index.html
new file mode 100644
index 0000000000..778820ca66
--- /dev/null
+++ b/files/de/web/api/cache/add/index.html
@@ -0,0 +1,106 @@
+---
+title: Cache.add()
+slug: Web/API/Cache/add
+translation_of: Web/API/Cache/add
+---
+<p>{{APIRef("Service Workers API")}}</p>
+
+<p><span class="seoSummary">Die <strong><code>add()</code></strong> Methode des {{domxref("Cache")}} Interface nimmt eine URL, ruft sie ab und fügt das resultierende Objekt zum gegebenen Cache. </span>Die <code>add()</code> Methode gleicht funktional dem folgenden:</p>
+
+<pre class="brush: js">fetch(url).then(function(response) {
+  if (!response.ok) {
+    throw new TypeError('bad response status');
+  }
+  return cache.put(url, response);
+})</pre>
+
+<p>Für komplexere Operationen müssen Sie {{domxref("Cache.put","Cache.put()")}} direkt verwenden.</p>
+
+<div class="note">
+<p><strong>Hinweis</strong>: <code>add()</code> wird alle zuvor im Cache gespeicherten Schlüssel-Wert-Paare die der Request gleichen überschreiben.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="sytaxbox"><em>cache</em>.add(<em>request</em>).then(function() {
+  // request wurde dem Cache hinzugefügt
+});
+</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt>request</dt>
+ <dd>Die Request, die dem Cache hinzugefügt werden soll. Dies kann ein {{domxref("Request")}} Objekt oder eine URL sein.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Eine {{jsxref("Promise")}}, die auf void auflöst.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"><strong>Exception</strong></th>
+   <th scope="col"><strong>Tritt auf wenn</strong></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>TypeError</code></td>
+   <td>
+    <p>Das URL-Schema nicht <code>http</code> oder <code>https</code> ist.</p>
+
+    <p>Der Antwortstatus ist nicht im 200 Bereich (d.h. keine erfolgreiche Antwort) Dies tritt auf, wenn die Request nicht erfolgreich zurückgegeben wird aber auch wenn die Request eine <em>cross-origin no-cors</em> Request ist (In diesem Fall ist der Status immer 0.)</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Dieser Codeblock wartet darauf, dass ein {{domxref("InstallEvent")}} ausgelöst wird, ruft dann {{domxref("ExtendableEvent.waitUntil","waitUntil()")}} auf, um den Installationsprozess der Applikation einzuleiten. Dies beinhaltet den Aufruf von {{domxref("CacheStorage.open")}} um einen neuen Cache zu erstellen, um dann mittels {{domxref("Cache.add")}} etwas zu diesem hinzuzufügen.</p>
+
+<pre class="brush: js">this.addEventListener('install', function(event) {
+  event.waitUntil(
+    caches.open('v1').then(function(cache) {
+      return cache.add('/sw-test/index.html');
+    })
+  );
+});
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</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('Service Workers', '#dom-cache-add', 'Cache: add')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Erstdefinition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("api.Cache.add")}}</p>
+</div>
+
+<h2 id="Weiterlesen">Weiterlesen</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/de/docs/Web/API/Service_Worker_API/Using_Service_Workers">Service-Worker benutzen</a></li>
+ <li>{{domxref("Cache")}}</li>
+ <li>{{domxref("WorkerGlobalScope.caches")}}</li>
+</ul>
diff --git a/files/de/web/api/cache/addall/index.html b/files/de/web/api/cache/addall/index.html
new file mode 100644
index 0000000000..78467ff40f
--- /dev/null
+++ b/files/de/web/api/cache/addall/index.html
@@ -0,0 +1,212 @@
+---
+title: Cache.addAll()
+slug: Web/API/Cache/addAll
+tags:
+  - Cache
+  - Experimentell
+  - Methoden
+  - Referenz
+  - Service Worker
+translation_of: Web/API/Cache/addAll
+---
+<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
+
+<h2 id="Zusammenfassung">Zusammenfassung</h2>
+
+<p>Die <strong>addAll() </strong>Methode der {{domxref("Cache")}} Schnittstelle nimmt ein Array von URLS,  ruft diese ab und fügt die daraus resultierenden Antwortobjekte zum jeweiligen Cache hinzu. Die Antwortobjekte, welche während des Abrufens erzeugt werden, werden zu Schlüsselwerten für die gespeicherten Antwortoperationen. </p>
+
+<div class="note">
+<p><strong>Hinweis</strong>: <code>addAll()</code> überschreibt jegliche Schlüsselwertpaare im Cache, die der Anfrage entsprechen wird aber scheitern, wenn eine resultierende put() Operation einen früheren Cache-Eintrag, der durch die gleiche addAll() Methode erzeugt wurde, überschreiben würde.</p>
+</div>
+
+<div class="note">
+<p><strong>Hinweis</strong>: Ursprüngliche Cache Implementationen (sowohl in Blink als auch in Gecko) lösen {{domxref("Cache.add")}}, {{domxref("Cache.addAll")}}, und {{domxref("Cache.put")}}  Promises auf, wenn die jeweilige Antwort vollständig in den Speicher geschrieben wurde. Neuere Spezifikationsversionen haben aktualisierte Informationen, welche aussagen, dass der Browser den Promise bereits auflösen kann, wenn der Eintrag in die Datenbank erfolgt, auch wenn die Antwort  zu diesem Zeitpunkt noch nicht vollständig geschrieben wurde (sprich der Datenstrom in den Speicher ist noch nicht beendet).</p>
+</div>
+
+<div class="note">
+<p><strong>Hinweis: </strong> Zum Stand von Chrome 46 wird die Cache API nur Anfragen von sicheren Quellen speichern, also solche die via HTTPS angeboten werden.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: js">cache.addAll(requests[]).then(function() {
+  //Anfragen wurden zum Cache hinzugefügt
+});
+</pre>
+
+<h3 id="Argumente">Argumente</h3>
+
+<dl>
+ <dt>requests</dt>
+ <dd>Ein Array von {{domxref("Request")}} Objekten, die Sie zum Cache hinzufügen möchten.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Ein {{jsxref("Promise")}} der mit void auflöst.</p>
+
+<h3 id="Ausnahmen">Ausnahmen</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"><strong>Ausnahme</strong></th>
+   <th scope="col"><strong>Passiert bei</strong></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>TypeError</code></td>
+   <td>
+    <p>Das URL Schama ist nicht http oder https.</p>
+
+    <p>Der Antwortstatus ist nicht im 200er Bereich ( nicht erfolgreiche Antwort ). Dies entsteht, wenn die Anfrage nicht erfolreich zurückgibt, aber auch, wenn die Anfrage eine cross-origin no-cors Anfrage ist (in diesem Fall wird immer 0 als Berichtsstatus gegeben).</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Beispiele"><strong style="font-size: 2.14285714285714rem; font-weight: 700; letter-spacing: -1px; line-height: 30px;">Beispiele</strong></h2>
+
+<p>Dieser Programmblock wartet auf ein abgesetztes {{domxref("InstallEvent")}} , woraufhin ein {{domxref("ExtendableEvent.waitUntil","waitUntil")}} läuft, das den Installationsprozess für die Applikation handhabt. Das beinhaltet das Aufrufen von {{domxref("CacheStorage.open")}} um einen neuen Cache zu erstellen. Anschließend wird addAll() benutzt um diesem eine Reihe von Ressourcen (in diesem Fall html, css und Bild-Ressourcen) hinzuzufügen.</p>
+
+<pre class="brush: js">this.addEventListener('install', function(event) {
+  event.waitUntil(
+    caches.open('v1').then(function(cache) {
+      return cache.addAll([
+        '/sw-test/',
+        '/sw-test/index.html',
+        '/sw-test/style.css',
+        '/sw-test/app.js',
+        '/sw-test/image-list.js',
+        '/sw-test/star-wars-logo.jpg',
+        '/sw-test/gallery/',
+        '/sw-test/gallery/bountyHunters.jpg',
+        '/sw-test/gallery/myLittleVader.jpg',
+        '/sw-test/gallery/snowTroopers.jpg'
+      ]);
+    })
+  );
+});
+</pre>
+
+<h3 id="Spezifikationen">Spezifikationen</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#cache', 'Cache')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Erste Definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserunterstützung">Browserunterstützung</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(46.0)}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>24</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Require HTTPS</td>
+   <td>{{CompatChrome(46.0)}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>TypeError</code> if request is not successful</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(47.0)}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(46.0)}}</td>
+  </tr>
+  <tr>
+   <td>Require HTTPS</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(46.0)}}</td>
+  </tr>
+  <tr>
+   <td><code>TypeError</code> if request is not successful</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Service workers (und <a href="/en-US/docs/Web/API/Push_API">Push</a>) wurden in <a href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 45 Extended Support Release</a> (ESR.) abgeschaltet.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Using Service Workers</a></li>
+ <li>{{domxref("Cache")}}</li>
+ <li>{{domxref("WorkerGlobalScope.caches")}}</li>
+</ul>
diff --git a/files/de/web/api/cache/index.html b/files/de/web/api/cache/index.html
new file mode 100644
index 0000000000..3043baa825
--- /dev/null
+++ b/files/de/web/api/cache/index.html
@@ -0,0 +1,288 @@
+---
+title: Cache
+slug: Web/API/Cache
+tags:
+  - API
+  - Cache
+  - Draft
+  - Experimental
+  - Interface
+  - NeedsTranslation
+  - Offline
+  - Reference
+  - Service Workers
+  - Storage
+  - TopicStub
+translation_of: Web/API/Cache
+---
+<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
+
+<p>The <strong><code>Cache</code></strong> interface provides a storage mechanism for <code><a href="http://fetch.spec.whatwg.org/#request">Request</a></code> / <code><a href="http://fetch.spec.whatwg.org/#response">Response</a></code> object pairs that are cached, for example as part of the {{domxref("ServiceWorker")}} life cycle. Note that the <code>Cache</code> interface is exposed to windowed scopes as well as workers. You don't have to use it in conjunction with service workers, even though it is defined in the service worker spec.</p>
+
+<p>An origin can have multiple, named <code>Cache</code> objects. You are responsible for implementing how your script (e.g. in a {{domxref("ServiceWorker")}})  handles <code>Cache</code> updates. Items in a <code>Cache</code> do not get updated unless explicitly requested; they don’t expire unless deleted. Use {{domxref("CacheStorage.open", "CacheStorage.open(cacheName)")}} to open a specific named <code>Cache</code> object and then call any of the <code>Cache</code> methods to maintain the <code>Cache</code>.</p>
+
+<p>You are also responsible for periodically purging cache entries. Each browser has a hard limit on the amount of cache storage that a given origin can use. The browser does its best to manage disk space, but it may delete the Cache storage for an origin.  The browser will generally delete all of the data for an origin or none of the data for an origin. Make sure to version caches by name and use the caches only from the version of the script that they can safely operate on. See <a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers#Deleting_old_caches">Deleting old caches</a> for more information.</p>
+
+<div class="note">
+<p><strong>Note</strong>: {{domxref("Cache.put")}}, {{domxref("Cache.add")}}, and {{domxref("Cache.addAll")}} only allow <code>GET</code> requests to be stored in the cache.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: Initial Cache implementations (in both Blink and Gecko) resolve {{domxref("Cache.add")}}, {{domxref("Cache.addAll")}}, and {{domxref("Cache.put")}} promises when the response body is fully written to storage.  More recent spec versions have newer language stating that the browser can resolve the promise as soon as the entry is recorded in the database even if the response body is still streaming in.</p>
+</div>
+
+<div class="note">
+<p><strong>Note:</strong> As of Chrome 46, the Cache API will only store requests from secure origins, meaning those served over HTTPS.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: The key matching algorithm depends on the <a href="https://www.fastly.com/blog/best-practices-for-using-the-vary-header">VARY header</a> in the value. So matching a new key requires looking at both key and value for entries in the Cache.</p>
+</div>
+
+<div class="note">
+<p><strong>Note:</strong> The caching API doesn't honor HTTP caching headers.</p>
+</div>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{domxref("Cache.match", "Cache.match(request, options)")}}</dt>
+ <dd>Returns a {{jsxref("Promise")}} that resolves to the response associated with the first matching request in the {{domxref("Cache")}} object.</dd>
+ <dt>{{domxref("Cache.matchAll", "Cache.matchAll(request, options)")}}</dt>
+ <dd>Returns a {{jsxref("Promise")}} that resolves to an array of all matching requests in the {{domxref("Cache")}} object.</dd>
+ <dt>{{domxref("Cache.add", "Cache.add(request)")}}</dt>
+ <dd>Takes a URL, retrieves it and adds the resulting response object to the given cache. This is fuctionally equivalent to calling fetch(), then using Cache.put() to add the results to the cache.</dd>
+ <dt>{{domxref("Cache.addAll", "Cache.addAll(requests)")}}</dt>
+ <dd>Takes an array of URLs, retrieves them, and adds the resulting response objects to the given cache.</dd>
+ <dt>{{domxref("Cache.put", "Cache.put(request, response)")}}</dt>
+ <dd>Takes both a request and its response and adds it to the given cache.</dd>
+ <dt>{{domxref("Cache.delete", "Cache.delete(request, options)")}}</dt>
+ <dd>Finds the {{domxref("Cache")}} entry whose key is the request, and if found, deletes the {{domxref("Cache")}} entry and returns a {{jsxref("Promise")}} that resolves to <code>true</code>. If no {{domxref("Cache")}} entry is found, it returns <code>false</code>.</dd>
+ <dt>{{domxref("Cache.keys", "Cache.keys(request, options)")}}</dt>
+ <dd>Returns a {{jsxref("Promise")}} that resolves to an array of {{domxref("Cache")}} keys.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>This code snippet is from the <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/selective-caching/service-worker.js">service worker selective caching sample</a>. (see <a href="https://googlechrome.github.io/samples/service-worker/selective-caching/">selective caching live</a>) The code uses {{domxref("CacheStorage.open", "CacheStorage.open(cacheName)")}} to open any {{domxref("Cache")}} objects with a Content-Type header that starts with <code>font/</code>.</p>
+
+<p>The code then uses {{domxref("Cache.match", "Cache.match(request, options)")}} to see if there's already a matching font in the cache, and if so, returns it. If there isn't a matching font, the code fetches the font from the network and uses {{domxref("Cache.put","Cache.put(request, response)")}} to cache the fetched resource.</p>
+
+<p>The code handles exceptions thrown from the {{domxref("Globalfetch.fetch","fetch()")}} operation. Note that a HTTP error response (e.g., 404) will not trigger an exception. It will return a normal response object that has the appropriate error code set.</p>
+
+<p>The code snippet also shows a best practice for versioning caches used by the service worker. Though there's only one cache in this example, the same approach can be used for multiple caches. It maps a shorthand identifier for a cache to a specific, versioned cache name. The code also deletes all caches that aren't named in <code>CURRENT_CACHES</code>.</p>
+
+<div class="note"><strong>Note:</strong> In Chrome, visit chrome://inspect/#service-workers and click on the "inspect" link below the registered service worker to view logging statements for the various actions the <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/selective-caching/service-worker.js">service-worker.js</a> script is performing.</div>
+
+<pre class="brush: js">var CACHE_VERSION = 1;
+
+// Shorthand identifier mapped to specific versioned cache.
+var CURRENT_CACHES = {
+  font: 'font-cache-v' + CACHE_VERSION
+};
+
+self.addEventListener('activate', function(event) {
+  var expectedCacheNames = Object.keys(CURRENT_CACHES).map(function(key) {
+    return CURRENT_CACHES[key];
+  });
+
+  // Active worker won't be treated as activated until promise resolves successfully.
+  event.waitUntil(
+    caches.keys().then(function(cacheNames) {
+      return Promise.all(
+        cacheNames.map(function(cacheName) {
+          if (expectedCacheNames.indexOf(cacheName) == -1) {
+            console.log('Deleting out of date cache:', cacheName);
+
+            return caches.delete(cacheName);
+          }
+        })
+      );
+    })
+  );
+});
+
+self.addEventListener('fetch', function(event) {
+  console.log('Handling fetch event for', event.request.url);
+
+  event.respondWith(
+
+    // Opens Cache objects that start with 'font'.
+    caches.open(CURRENT_CACHES['font']).then(function(cache) {
+      return cache.match(event.request).then(function(response) {
+        if (response) {
+          console.log(' Found response in cache:', response);
+
+          return response;
+        }
+      }).catch(function(error) {
+
+        // Handles exceptions that arise from match() or fetch().
+        console.error('  Error in fetch handler:', error);
+
+        throw error;
+      });
+    })
+  );
+});</pre>
+
+<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('Service Workers', '#cache', 'Cache')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{CompatGeckoDesktop(39)}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>24</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>add()</td>
+   <td>{{CompatChrome(44.0)}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>addAll()</td>
+   <td>{{CompatChrome(46.0)}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>matchAll()</td>
+   <td>{{CompatChrome(47.0)}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Require HTTPS for <code>add()</code>, <code>addAll()</code>, and <code>put()</code></td>
+   <td>{{CompatChrome(46.0)}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(39)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(40.0)}}</td>
+  </tr>
+  <tr>
+   <td>add()</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(44.0)}}</td>
+  </tr>
+  <tr>
+   <td>addAll()</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(46.0)}}</td>
+  </tr>
+  <tr>
+   <td>matchAll()</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(46.0)}}</td>
+  </tr>
+  <tr>
+   <td>Require HTTPS for <code>add()</code>, <code>addAll()</code>, and <code>put()</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(46.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Service workers (and <a href="/en-US/docs/Web/API/Push_API">Push</a>) have been disabled in the <a href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 45 Extended Support Release</a> (ESR.)</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Using Service Workers</a></li>
+ <li><a class="external external-icon" href="https://github.com/mdn/sw-test">Service workers basic code example</a></li>
+ <li><a class="external external-icon" href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li>
+ <li>{{jsxref("Promise")}}</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Performance/Using_web_workers">Using web workers</a></li>
+</ul>
diff --git a/files/de/web/api/canvasrenderingcontext2d/canvas/index.html b/files/de/web/api/canvasrenderingcontext2d/canvas/index.html
new file mode 100644
index 0000000000..47b01c8f72
--- /dev/null
+++ b/files/de/web/api/canvasrenderingcontext2d/canvas/index.html
@@ -0,0 +1,56 @@
+---
+title: CanvasRenderingContext2D.canvas
+slug: Web/API/CanvasRenderingContext2D/canvas
+translation_of: Web/API/CanvasRenderingContext2D/canvas
+---
+<div>{{APIRef}}</div>
+
+<p>Die <code><strong>CanvasRenderingContext2D.canvas</strong></code> Eigenschaft, Teil der <a href="/en-US/docs/Web/API/Canvas_API">Canvas API</a>, ist eine Nurlese-Referenz auf das {{domxref("HTMLCanvasElement")}} Objekt, das mit einem gegebenen Kontext assoziiert ist. Sie kann {{jsxref("null")}} sein, wenn kein assoziiertes {{HTMLElement("canvas")}} Element existiert.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox notranslate"><var><em>ctx</em></var>.canvas;</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Wenn dieses {{HTMLElement("canvas")}} Element gegeben ist:</p>
+
+<pre class="brush: html notranslate">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<p>... kannst du eine Referenz auf das Canvas-Element innerhalb von <code>CanvasRenderingContext2D</code> herstellen, indem du die <code>canvas</code> Eigenschaft verwendest.</p>
+
+<pre class="brush: js notranslate">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+ctx.canvas // HTMLCanvasElement
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-canvas", "CanvasRenderingContext2D.canvas")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2>
+
+<div class="hidden">Die Kompatibilitätstabelle auf dieser Seite wird mit strukturierten Daten generiert. Wenn du an diesen Daten mitwirken möchtest, schau dir <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> an und sende uns einen Pull Request.</div>
+
+<p>{{Compat("api.CanvasRenderingContext2D.canvas")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{domxref("CanvasRenderingContext2D")}} interface</li>
+ <li><a href="/en-US/docs/Web/API/Canvas_API">Canvas API</a></li>
+</ul>
diff --git a/files/de/web/api/canvasrenderingcontext2d/fillrect/index.html b/files/de/web/api/canvasrenderingcontext2d/fillrect/index.html
new file mode 100644
index 0000000000..178a861f4e
--- /dev/null
+++ b/files/de/web/api/canvasrenderingcontext2d/fillrect/index.html
@@ -0,0 +1,177 @@
+---
+title: CanvasRenderingContext2D.fillRect()
+slug: Web/API/CanvasRenderingContext2D/fillRect
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Method
+  - Methode(2)
+  - Reference
+  - Referenz
+translation_of: Web/API/CanvasRenderingContext2D/fillRect
+---
+<div>{{APIRef}}</div>
+
+<p>Die Methode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.fillRect()</code></strong> der Canvas 2D API zeichnet ein ausgefülltes Rechteck an der Position <em>(<code>x</code>, <code>y</code>)</em>. Die Größe wird über die Parameter <code><em>width</em></code> und <code><em>height</em></code> bestimmt. Die Füllfarbe wird über das Attribut <code>fillStyle</code> des Context-Objekts festgelegt.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.fillRect(x, y, width, height);</var>
+</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Die Koordinate auf der x-Achse als horizontaler Startpunkt des Rechtecks.</dd>
+ <dt><code>y</code></dt>
+ <dd>Die Koordinate auf der y-Achse als vertikaler Startpunkt des Rechtecks.</dd>
+ <dt><code>width</code></dt>
+ <dd>Die Breite des Rechtecks.</dd>
+ <dt><code>height</code></dt>
+ <dd>Die Höhe des Rechtecks.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Benutzung_der_Methode_fillRect">Benutzung der Methode <code>fillRect</code></h3>
+
+<p>Dies ist ein einfaches Code-Beispiel, welches die <code>fillRect</code> Methode nutzt.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[4]">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+ctx.fillStyle = "green";
+ctx.fillRect(10, 10, 100, 100);
+
+// fill the whole canvas
+// ctx.fillRect(0, 0, canvas.width, canvas.height);
+</pre>
+
+<p>Ändern Sie den unten gezeigten Code und sehen Sie Ihre Änderungen live im Canvas-Element:</p>
+
+<div style="display: none;">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.fillStyle = "green";
+ctx.fillRect(10, 10, 100, 100);&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fillrect", "CanvasRenderingContext2D.fillRect")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</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>Feature</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>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>Das zugehörige Interface, {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.fillStyle")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.clearRect()")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.strokeRect()")}}</li>
+</ul>
diff --git a/files/de/web/api/canvasrenderingcontext2d/getimagedata/index.html b/files/de/web/api/canvasrenderingcontext2d/getimagedata/index.html
new file mode 100644
index 0000000000..c8b6bdf2be
--- /dev/null
+++ b/files/de/web/api/canvasrenderingcontext2d/getimagedata/index.html
@@ -0,0 +1,142 @@
+---
+title: CanvasRenderingContext2D.getImageData()
+slug: Web/API/CanvasRenderingContext2D/getImageData
+translation_of: Web/API/CanvasRenderingContext2D/getImageData
+---
+<div>{{APIRef}}</div>
+
+<p>Die <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.getImageData()</code></strong> Methode der Canvas 2D API gibt ein Objekt des Types  {{domxref("ImageData")}} zurück. Dieses Objekt repräsentiert die jeweiligen Pixel-Daten im Bereich des Rechtecks mit den Startkoordinaten <em>(</em><em>sx</em><em>,</em><em>sy</em><em>) </em> und den Dimensionen <em>sw </em> in der Breite und<em> sy </em> in der Höhe. </p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">ImageData <var><em>ctx</em>.getImageData(sx, sy, sw, sh);</var>
+</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>sx</code></dt>
+ <dd>Die x Koordinate der oberen linken Ecke des Rechtecks, aus welchem die Pixel-Daten gelesen werden.</dd>
+ <dt><code>sy</code></dt>
+ <dd>Die y Koordinate der oberen linken Ecke des Rechtecks, aus welchem die Pixel-Daten gelesen werden.</dd>
+ <dt><code>sw</code></dt>
+ <dd>Die Breite des Rechtecks aus dem die Pixel-Daten gelesen werden.</dd>
+ <dt><code>sh</code></dt>
+ <dd>Die Höhe des Rechtecks aus dem die Pixel-Daten gelesen werden. </dd>
+</dl>
+
+<h3 id="Rückgabewerte">Rückgabewerte</h3>
+
+<p>Ein Objekt vom Typ {{domxref("ImageData")}} das die Pixeldaten im angegeben bereich des Canvas-Elements beinhaltet.</p>
+
+<h3 id="Fehlertypen">Fehlertypen</h3>
+
+<dl>
+ <dt><code>IndexSizeError</code></dt>
+ <dd>Tritt ein, wenn entweder das Höhen oder das Breiten Argument null ist.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Benutzung_der_getImageData_Funktion">Benutzung der <code>getImageData</code> Funktion</h3>
+
+<p>Das ist ein einfaches Code-Beispiel zur Benutzung der <code>getImageData</code> Funktion. Für mehr Informationen siehe <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas">Pixel manipulation with canvas</a> und die Referenz zum {{domxref("ImageData")}} Objekt.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[6]">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+ctx.rect(10, 10, 100, 100);
+ctx.fill();
+
+console.log(ctx.getImageData(50, 50, 100, 100));
+// ImageData { width: 100, height: 100, data: Uint8ClampedArray[40000] }
+</pre>
+
+<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#dom-context-2d-getimagedata", "CanvasRenderingContext2D.getImageData")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{ CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}} [1]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}} [1]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Ab {{GeckoRelease("5.0")}} unterstützt <code>getImageData()</code> die Angabe von Rechtecken, die die Ränder des <em>Canvas-</em>Elements überschreiten. Die Pixel, die außerhalb des Elementes liegen, werden als transparentes Schwarz zurückgegeben. Auch wenn die größe des Rechtecks kleiner als eins ist wird jetzt mindestens ein Pixel als Pixel-Daten zurückgegeben.</p>
+
+<h2 id="Sehen_Sie_auch">Sehen Sie auch</h2>
+
+<ul>
+ <li>Das Interface zur Definition, {{domxref("CanvasRenderingContext2D")}}.</li>
+ <li>{{domxref("ImageData")}}</li>
+ <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas">Pixel manipulation with canvas</a></li>
+</ul>
diff --git a/files/de/web/api/canvasrenderingcontext2d/index.html b/files/de/web/api/canvasrenderingcontext2d/index.html
new file mode 100644
index 0000000000..aa9c1ea07a
--- /dev/null
+++ b/files/de/web/api/canvasrenderingcontext2d/index.html
@@ -0,0 +1,432 @@
+---
+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>
diff --git a/files/de/web/api/canvasrenderingcontext2d/ispointinpath/index.html b/files/de/web/api/canvasrenderingcontext2d/ispointinpath/index.html
new file mode 100644
index 0000000000..5eac7321fe
--- /dev/null
+++ b/files/de/web/api/canvasrenderingcontext2d/ispointinpath/index.html
@@ -0,0 +1,206 @@
+---
+title: CanvasRenderingContext2D.isPointInPath()
+slug: Web/API/CanvasRenderingContext2D/isPointInPath
+translation_of: Web/API/CanvasRenderingContext2D/isPointInPath
+---
+<div>{{APIRef}}</div>
+
+<p>Die Methode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.isPointInPath()</code></strong> der Canvas 2D API entscheidet darüber, ob ein Punkt in einem gegeben Pfad enthalten ist.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">boolean <var><em>ctx</em>.isPointInPath(x, y);
+boolean <var><em>ctx</em>.isPointInPath(x, y, fillRule);
+
+boolean <var><em>ctx</em>.isPointInPath(path, x, y);
+boolean <var><em>ctx</em>.isPointInPath(path, x, y, fillRule);</var></var></var></var>
+</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt>x</dt>
+ <dd>Die X-Koordinate des zu prüfenden Punktes.</dd>
+ <dt>y</dt>
+ <dd>Die Y-Koordinate des zu prüfenden Punktes.</dd>
+ <dt><code>fillRule</code></dt>
+ <dd>Der Algorithmus, der prüft, ob der Punkt innerhalb oder außerhalb des Pfades liegt.<br>
+ Mögliche Werte:
+ <ul>
+  <li><code><strong>"nonzero</strong></code>": Die <a href="http://en.wikipedia.org/wiki/Nonzero-rule">non-zero winding Regel</a>, sie ist standardmäßig eingestellt.</li>
+  <li><code><strong>"evenodd"</strong></code>: Die <a href="http://en.wikipedia.org/wiki/Even%E2%80%93odd_rule">even-odd winding Regel</a>.</li>
+ </ul>
+ </dd>
+ <dt><code>path</code></dt>
+ <dd>Ein {{domxref("Path2D")}} Objekt.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<dl>
+ <dt>{{jsxref("Boolean")}}</dt>
+ <dd>Ein Boolean, welcher <code>true</code> ist, wenn der gegebene Punkt innerhalb des gegeben Pfades liegt, ansonsten <code>false</code>.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Benutzung_der_Methode_isPointInPath">Benutzung der Methode <code>isPointInPath</code></h3>
+
+<p>Dies ist ein einfaches Snippet, welches die <code>isPointinPath</code> Methode nutzt, um zu prüfen, ob ein Punkt in gegebenem Pfad enthalten ist.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[6]">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.rect(10, 10, 100, 100);
+ctx.stroke();
+console.log(ctx.isPointInPath(10, 10)); // true
+</pre>
+
+<p>Editieren Sie den folgenden Quelltext. Die Änderungen werden in Echtzeit übernommen und Log-Ausgaben in die <a href="/en-US/docs/Tools/Browser_Console">console</a> ausgegeben:</p>
+
+<div style="display: none;">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.rect(10, 10, 100, 100);
+ctx.stroke();
+console.log(ctx.isPointInPath(10, 10)); // true&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<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#dom-context-2d-ispointinpath", "CanvasRenderingContext2D.isPointInPath")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</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>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Path parameter</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop(31) }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Path parameter</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoMobile(31) }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Compatibility_notes">Compatibility notes</h2>
+
+<ul>
+ <li>Prior to Gecko 7.0 (Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4), this method incorrectly failed to multiply the specified point's coordinates by the current transformation matrix before comparing it to the path. Now this method works correctly even if the context is rotated, scaled, or otherwise transformed.</li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The interface defining it, {{domxref("CanvasRenderingContext2D")}}.</li>
+</ul>
diff --git a/files/de/web/api/canvasrenderingcontext2d/scale/index.html b/files/de/web/api/canvasrenderingcontext2d/scale/index.html
new file mode 100644
index 0000000000..b26824a51e
--- /dev/null
+++ b/files/de/web/api/canvasrenderingcontext2d/scale/index.html
@@ -0,0 +1,223 @@
+---
+title: CanvasRenderingContext2D.scale()
+slug: Web/API/CanvasRenderingContext2D/scale
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Méthode
+  - Referenz
+translation_of: Web/API/CanvasRenderingContext2D/scale
+---
+<div>{{APIRef}}</div>
+
+<p>Die Methode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.scale()</code></strong> der Canvas 2D API skaliert das Canvas-Element um den Faktor x horizontal und um den Faktor y vertikal.</p>
+
+<p>Normalerweise ist eine Einheit auf dem Canvas genau ein Pixel. Wenn wir zum Beispiel einen Skalierungsfaktor von 0,5 Pixeln anwenden, ist eine Einheit 0,5 Pixel und alle Objekte werden mit der halben Größe gezeichnet. Analog dazu vergößert der Skalierungsfaktor 2,0 die Längeneinheit auf zwei Pixel. Die Objekte werden dann doppelt so groß gezeichnet.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.scale(x, y);</var>
+</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Skalierungsfaktor in horizontaler Richtung.</dd>
+ <dt><code>y</code></dt>
+ <dd>Skalierungsfaktor in vertikaler Richtung</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Die_Methode_scale_verwenden">Die Methode <code>scale</code> verwenden</h3>
+
+<p>Dies ist nur ein kurzes Beispiel, das die Methode <code>scale</code> benutzt.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[4]">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.scale(10, 3);
+ctx.fillRect(10, 10, 10, 10);
+
+// reset current transformation matrix to the identity matrix
+ctx.setTransform(1, 0, 0, 1, 0, 0);
+</pre>
+
+<p>Editieren Sie den folgenden Code und sehen Sie die Änderungen sofort im Canvas:</p>
+
+<div style="display: none;">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.scale(10, 3);
+ctx.fillRect(10,10,10,10);
+ctx.setTransform(1, 0, 0, 1, 0, 0);&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h3 id="scale_verwenden_um_horizontal_oder_vertikal_zu_spiegeln"><code>scale</code> verwenden, um horizontal oder vertikal zu spiegeln</h3>
+
+<p>Sie können <code>ctx.scale(-1, 1)</code> benutzen, um den Inhalt horizontal zu spiegeln und <code>ctx.scale(1, -1)</code>, um ihn vertikal zu spiegeln.</p>
+
+<div style="display: none;">
+<h6 id="Playable_code2">Playable code2</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.scale(-1, 1);
+ctx.font = "48px serif";
+ctx.fillText("Hello world!", -320, 120);
+ctx.setTransform(1, 0, 0, 1, 0, 0);&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code2', 700, 360) }}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</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#dom-context-2d-scale", "CanvasRenderingContext2D.scale")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompabilität">Browserkompabilität</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>Das Interface, durch das es definiert wird, {{domxref("CanvasRenderingContext2D")}}</li>
+</ul>
diff --git a/files/de/web/api/canvasrenderingcontext2d/setlinedash/index.html b/files/de/web/api/canvasrenderingcontext2d/setlinedash/index.html
new file mode 100644
index 0000000000..a7d5bd82c3
--- /dev/null
+++ b/files/de/web/api/canvasrenderingcontext2d/setlinedash/index.html
@@ -0,0 +1,179 @@
+---
+title: CanvasRenderingContext2D.setLineDash()
+slug: Web/API/CanvasRenderingContext2D/setLineDash
+translation_of: Web/API/CanvasRenderingContext2D/setLineDash
+---
+<div>{{APIRef}}</div>
+
+<p>The <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.setLineDash()</code></strong> method of the Canvas 2D API sets the line dash pattern.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.setLineDash(segments);</var>
+</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>segments</code></dt>
+ <dd>An {{jsxref("Array")}}. A list of numbers that specifies distances to alternately draw a line and a gap (in coordinate space units). If the number of elements in the array is odd, the elements of the array get copied and concatenated. For example, <code>[5, 15, 25]</code> will become <code>[5, 15, 25, 5, 15, 25]</code>. An empty array clears the dashes, so that a solid line will be drawn.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Using_the_setLineDash_method">Using the <code>setLineDash</code> method</h3>
+
+<p>This is just a simple code snippet which uses the <code>setLineDash</code> method to draw a dashed line.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[4]">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.setLineDash([5, 15]);
+
+ctx.beginPath();
+ctx.moveTo(0,100);
+ctx.lineTo(400, 100);
+ctx.stroke();
+</pre>
+
+<p>Edit the code below and see your changes update live in the canvas:</p>
+
+<div style="display: none;">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.setLineDash([5, 15]);
+ctx.beginPath();
+ctx.moveTo(0,100);
+ctx.lineTo(400, 100);
+ctx.stroke();&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<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#dom-context-2d-setlinedash", "CanvasRenderingContext2D.setLineDash")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</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>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoDesktop(27) }}</td>
+   <td>{{ CompatIE(11) }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile(27) }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Gecko-specific_notes">Gecko-specific notes</h2>
+
+<ul>
+ <li>Starting with Gecko 7.0 {{geckoRelease("7.0")}}, the non-standard and deprecated property <code>mozDash</code> has been implemented to set and get a dash list. This property will be deprecated and removed in the future, see {{bug(931643)}}. Use <code>setLineDash()</code> instead.</li>
+</ul>
+
+<h2 id="WebKit-specific_notes">WebKit-specific notes</h2>
+
+<ul>
+ <li>In WebKit-based browsers (e.g. Safari), the non-standard and deprecated property <code>webkitLineDash</code> is implemented besides this method. Use <code>setLineDash()</code> instead.</li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The interface defining it, {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.getLineDash()")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.lineDashOffset")}}</li>
+</ul>
diff --git a/files/de/web/api/canvasrenderingcontext2d/textalign/index.html b/files/de/web/api/canvasrenderingcontext2d/textalign/index.html
new file mode 100644
index 0000000000..1f1651f456
--- /dev/null
+++ b/files/de/web/api/canvasrenderingcontext2d/textalign/index.html
@@ -0,0 +1,128 @@
+---
+title: CanvasRenderingContext2D.textAlign
+slug: Web/API/CanvasRenderingContext2D/textAlign
+translation_of: Web/API/CanvasRenderingContext2D/textAlign
+---
+<div>{{APIRef}}</div>
+
+<p>Die <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.textAlign</code></strong> Eigenschaft der Canvas 2D API spezifiert die aktuelle Textausrichtung welche beim zeichnen von Text verwendet wird.</p>
+
+<p>Nehmen Sie in Acht, dass die Ausrichtung auf dem x Wert der {{domxref("CanvasRenderingContext2D.fillText", "fillText()")}} Methode basiert. Wenn <code>textAlign</code>  <code>"center"</code> ist,  dann würde der Text an der Stelle <code>x - (width / 2)</code> gezeichnet werden.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var><em>ctx</em>.textAlign = "left" || "right" || "center" || "start" || "end";</var>
+</pre>
+
+<h3 id="Optionen">Optionen</h3>
+
+<p>Mögliche Werte:</p>
+
+<dl>
+ <dt><code>left</code></dt>
+ <dd>Der Text wird linksbündig ausgerichtet.</dd>
+ <dt><code>right</code></dt>
+ <dd>Der Text wird rechtsbündig ausgerichtet.</dd>
+ <dt><code>center</code></dt>
+ <dd>Der Text wird zentiert ausgerichtet.</dd>
+ <dt><code>start</code></dt>
+ <dd>Der Text wird am normalen Start der Zeile ausgerichtet. (Links -oder rechtsbündig, je nach Sprache).</dd>
+ <dt><code>end</code></dt>
+ <dd>Der Text wird am normalen Ende der Zeile ausgerichtet (Links -oder rechtsbündig, je nach Sprache).</dd>
+</dl>
+
+<p>Der Standardwert ist <code>start</code>.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Using_the_textAlign_property" name="Using_the_textAlign_property">Benutzung der <code>textAlign</code> Eigenschaft</h3>
+
+<p>Ein einfaches Beispiel welches die <code>textAlign</code> Eigenschaft benutzt um die Textausrichtung zu ändern.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.font = '48px serif';
+ctx.textAlign = 'left';
+ctx.strokeText('Hello world', 0, 100);
+</pre>
+
+<p>Ändern Sie den Code um Ihre Änderungen im Canvas zu sehen:</p>
+
+<div class="hidden">
+<h6 id="Playable_code" name="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.font = '48px serif';
+ctx.textAlign = 'left';
+ctx.strokeText('Hello world', 0, 100);&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var edit = document.getElementById('edit');
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener('click', function() {
+  textarea.focus();
+})
+
+textarea.addEventListener('input', drawCanvas);
+window.addEventListener('load', drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</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#dom-context-2d-textalign", "CanvasRenderingContext2D.textAlign")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("api.CanvasRenderingContext2D.textAlign")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>Das Interface welches es definiert, {{domxref("CanvasRenderingContext2D")}}.</li>
+</ul>
diff --git a/files/de/web/api/childnode/index.html b/files/de/web/api/childnode/index.html
new file mode 100644
index 0000000000..07dcc1cb33
--- /dev/null
+++ b/files/de/web/api/childnode/index.html
@@ -0,0 +1,190 @@
+---
+title: ChildNode
+slug: Web/API/ChildNode
+tags:
+  - API
+  - DOM
+  - Experimental
+  - Interface
+  - NeedsTranslation
+  - Node
+  - TopicStub
+translation_of: Web/API/ChildNode
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>The <code><strong>ChildNode</strong></code> interface contains methods that are particular to {{domxref("Node")}} objects that can have a parent.</p>
+
+<p><code>ChildNode</code> is a raw interface and no object of this type can be created; it is implemented by {{domxref("Element")}}, {{domxref("DocumentType")}}, and {{domxref("CharacterData")}} objects.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>There are neither inherited, nor specific properties.</em></p>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>There are no inherited methods.</em></p>
+
+<dl>
+ <dt>{{domxref("ChildNode.remove()")}} {{experimental_inline}}</dt>
+ <dd>Removes this <code>ChildNode</code> from the children list of its parent.</dd>
+ <dt>{{domxref("ChildNode.before()")}} {{experimental_inline}}</dt>
+ <dd>Inserts a set of {{domxref("Node")}} or {{domxref("DOMString")}} objects in the children list of this <code>ChildNode</code>'s parent, just before this <code>ChildNode</code>. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.</dd>
+ <dt>{{domxref("ChildNode.after()")}} {{experimental_inline}}</dt>
+ <dd>Inserts a set of {{domxref("Node")}} or {{domxref("DOMString")}} objects in the children list of this <code>ChildNode</code>'s parent, just after this <code>ChildNode</code>. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.</dd>
+ <dt>{{domxref("ChildNode.replaceWith()")}} {{experimental_inline}}</dt>
+ <dd>Replaces this <code>ChildNode</code> in the children list of its parent with a set of {{domxref("Node")}} or {{domxref("DOMString")}} objects. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.</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('DOM WHATWG', '#interface-childnode', 'ChildNode')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Split the <code>ElementTraversal</code> interface in {{domxref("ParentNode")}} and <code>ChildNode</code>. <code>previousElementSibling</code> and <code>nextElementSibling</code> are now defined on the latter. The {{domxref("CharacterData")}} and {{domxref("DocumentType")}} implemented the new interfaces. Added the <code>remove()</code>, <code>before()</code>, <code>after()</code> and <code>replaceWith()</code> methods.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Element Traversal', '#interface-elementTraversal', 'ElementTraversal')}}</td>
+   <td>{{Spec2('Element Traversal')}}</td>
+   <td>Added the initial definition of its properties to the <code>ElementTraversal</code> pure interface and use it on {{domxref("Element")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>External on github: <a href="https://github.com/seznam/JAK/blob/master/lib/polyfills/childNode.js">childNode.js</a></p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{ CompatibilityTable }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support (on {{domxref("Element")}})</td>
+   <td>{{CompatChrome(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(23)}}</td>
+   <td>9.0</td>
+   <td>10.0</td>
+   <td>4.0</td>
+  </tr>
+  <tr>
+   <td>Support on {{domxref("DocumentType")}} and {{domxref("CharacterData")}} {{experimental_inline}}</td>
+   <td>{{CompatChrome(23.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(23)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>16.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>remove()</code>{{experimental_inline}}</td>
+   <td>{{CompatChrome(29.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(23)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>16.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>before()</code>, <code>after()</code>, and <code>replaceWith()</code> {{experimental_inline}}</td>
+   <td>{{CompatChrome(54.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(49)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(39)}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support (on {{domxref("Element")}})</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(23)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Support on {{domxref("DocumentType")}} and {{domxref("CharacterData")}} {{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(23)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>16.0</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>remove()</code>{{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(23)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>16.0</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>before()</code>, <code>after()</code>, and <code>replaceWith()</code> {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(54.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(49)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOperaMobile(39)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(54.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The {{domxref("ParentNode")}} pure interface.</li>
+ <li>
+  <div class="syntaxbox">Object types implementing this pure interface: {{domxref("CharacterData")}}, {{domxref("Element")}}, and {{domxref("DocumentType")}}.</div>
+ </li>
+</ul>
diff --git a/files/de/web/api/childnode/remove/index.html b/files/de/web/api/childnode/remove/index.html
new file mode 100644
index 0000000000..bae33f75c0
--- /dev/null
+++ b/files/de/web/api/childnode/remove/index.html
@@ -0,0 +1,97 @@
+---
+title: ChildNode.remove()
+slug: Web/API/ChildNode/remove
+tags:
+  - API
+  - ChildNode
+  - DOM
+  - Experimentell
+  - Méthode
+translation_of: Web/API/ChildNode/remove
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Die <code><strong>ChildNode.remove()</strong></code> Methode entfernt ein Objekt aus der Baumstruktur ("tree") zu der es gehört.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>node</em>.remove();
+</pre>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<h3 id="Benutzung_von_remove()">Benutzung von <code>remove()</code></h3>
+
+<pre class="brush: html">&lt;div id="div-01"&gt;Dies ist div-01&lt;/div&gt;
+&lt;div id="div-02"&gt;Dies ist div-02&lt;/div&gt;
+&lt;div id="div-03"&gt;Dies ist div-03&lt;/div&gt;
author	Peter Bengtsson <mail@peterbe.com>	2020-12-08 14:41:15 -0500
committer	Peter Bengtsson <mail@peterbe.com>	2020-12-08 14:41:15 -0500
commit	4b1a9203c547c019fc5398082ae19a3f3d4c3efe (patch)
tree	d4a40e13ceeb9f85479605110a76e7a4d5f3b56b /files/de/web/api
parent	33058f2b292b3a581333bdfb21b8f671898c5060 (diff)
download	translated-content-4b1a9203c547c019fc5398082ae19a3f3d4c3efe.tar.gz translated-content-4b1a9203c547c019fc5398082ae19a3f3d4c3efe.tar.bz2 translated-content-4b1a9203c547c019fc5398082ae19a3f3d4c3efe.zip