initial commit

16 files changed, 2544 insertions, 0 deletions

diff --git a/files/fa/web/api/animationevent/animationevent/index.html b/files/fa/web/api/animationevent/animationevent/index.html
new file mode 100644
index 0000000000..cbdb74c9e8
--- /dev/null
+++ b/files/fa/web/api/animationevent/animationevent/index.html
@@ -0,0 +1,67 @@
+---
+title: AnimationEvent()
+slug: Web/API/AnimationEvent/AnimationEvent
+translation_of: Web/API/AnimationEvent/AnimationEvent
+---
+<p>{{APIRef("Web Animations")}}{{SeeCompatTable}}</p>
+
+<p>The <code><strong>AnimationEvent(نمای پویا)</strong></code> constructor returns a newly created {{domxref("AnimationEvent")}}, representing an event in relation with an animation.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>animationEvent</em> = new AnimationEvent(نمای پویا, {animationName: <em>aPropertyName</em>,
+                                           elapsedTime  : <em>aFloat</em>,
+                                           pseudoElement: <em>aPseudoElementName</em>});
+</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<p><em>The <code>AnimationEvent()</code> constructor also inherits arguments from {{domxref("Event.Event", "Event()")}}.</em></p>
+
+<dl>
+ <dt><code>type</code></dt>
+ <dd>A {{domxref("DOMString")}} representing the name of the type of the <code>AnimationEvent</code>. It is case-sensitive and can be: <code>'animationstart'</code>, <code>'animationend'</code>, or <code>'animationiteration'</code>.</dd>
+ <dt><code>animationName</code> {{optional_inline}}</dt>
+ <dd>A {{domxref("DOMString")}} containing the value of the {{cssxref("animation-name")}} CSS property associated with the transition. It defaults to <code>""</code>.</dd>
+ <dt><code>elapsedTime</code> {{optional_inline}}</dt>
+ <dd>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>. It defaults to <code>0.0</code>.</dd>
+ <dt><code>pseudoElement</code> {{optional_inline}}</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="Learn more about pseudo-elements.">pseudo-element</a> the animation runs on. If the animation doesn't run on a pseudo-element but on the element itself, specify an empty string: <code>""</code>. It defaults to <code>""</code>.</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>A new {{domxref("AnimationEvent")}}, initialized per any provided options.</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('CSS3 Animations', '#dom-animationevent-animationevent', 'AnimationEvent()') }}</td>
+   <td>{{ Spec2('CSS3 Animations')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.AnimationEvent.AnimationEvent")}}</p>
+
+<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>
+ <li>The {{domxref("AnimationEvent")}} interface it belongs to.</li>
+</ul>
diff --git a/files/fa/web/api/animationevent/index.html b/files/fa/web/api/animationevent/index.html
new file mode 100644
index 0000000000..b89a47286d
--- /dev/null
+++ b/files/fa/web/api/animationevent/index.html
@@ -0,0 +1,79 @@
+---
+title: AnimationEvent
+slug: Web/API/AnimationEvent
+tags:
+  - API
+  - Experimental
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - Web Animations
+translation_of: Web/API/AnimationEvent
+---
+<div>{{SeeCompatTable}}{{APIRef("Web Animations API")}}</div>
+
+<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="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="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 * <var>delay</var>)</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">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>.</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", "#interface-animationevent", "AnimationEvent")}}</td>
+   <td>{{Spec2("CSS3 Animations")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.AnimationEvent")}}</p>
+
+<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/fa/web/api/blob/index.html b/files/fa/web/api/blob/index.html
new file mode 100644
index 0000000000..e2de156275
--- /dev/null
+++ b/files/fa/web/api/blob/index.html
@@ -0,0 +1,129 @@
+---
+title: Blob
+slug: Web/API/Blob
+tags:
+  - API
+  - Files
+  - NeedsMobileBrowserCompatibility
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - WebAPI
+translation_of: Web/API/Blob
+---
+<div>{{APIRef("File API")}}</div>
+
+<p>A <code>Blob</code> object represents a file-like object of immutable, raw data. Blobs represent data that isn't necessarily in a JavaScript-native format. The {{domxref("File")}} interface is based on <code>Blob</code>, inheriting blob functionality and expanding it to support files on the user's system.</p>
+
+<p>To construct a <code>Blob</code> from other non-blob objects and data, use the {{domxref("Blob.Blob", "Blob()")}} constructor. To create a blob that contains a subset of another blob's data, use the {{domxref("Blob.slice()", "slice()")}} method. To obtain a <code>Blob</code> object for a file on the user's file system, see the {{domxref("File")}} documentation.</p>
+
+<p>The APIs accepting <code>Blob</code> objects are also listed on the {{domxref("File")}} documentation.</p>
+
+<div class="note">
+<p><strong>Note:</strong> 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"><strong>Note:</strong> Be aware that the <code>slice()</code> method has vendor prefixes on some browsers and versions: <code>blob.mozSlice()</code> for Firefox 12 and earlier and <code>blob.webkitSlice()</code> in Safari. An old version of the <code>slice()</code> method, without vendor prefixes, had different semantics, and is obsolete. The support for <code>blob.mozSlice()</code> has been dropped with Firefox 30.</div>
+
+<h2 id="Constructor">Constructor</h2>
+
+<dl>
+ <dt>{{domxref("Blob.Blob", "Blob(blobParts[, options])")}}</dt>
+ <dd>Returns a newly created <code>Blob</code> object whose content consists of the concatenation of the array of values given in parameter.</dd>
+</dl>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt>{{domxref("Blob.size")}} {{readonlyinline}}</dt>
+ <dd>The size, in bytes, of the data contained in the <code>Blob</code> object.</dd>
+ <dt>{{domxref("Blob.type")}} {{readonlyinline}}</dt>
+ <dd>A string indicating the MIME type of the data contained in the <code>Blob</code>. If the type is unknown, this string is empty.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{domxref("Blob.slice()", "Blob.slice([start[, end[, contentType]]])")}}</dt>
+ <dd>Returns a new <code>Blob</code> object containing the data in the specified range of bytes of the source <code>Blob</code>.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Blob_constructor_example_usage">Blob constructor example usage</h3>
+
+<p>The {{domxref("Blob.Blob", "Blob() constructor")}} allows one to create blobs from other objects. For example, to construct a blob from string:</p>
+
+<pre class="brush: js">var debug = {hello: "world"};
+var blob = new Blob([JSON.stringify(debug, null, 2)], {type : 'application/json'});</pre>
+
+<div class="warning">
+<p>Before the Blob constructor was available, this could be accomplished through the {{domxref("BlobBuilder")}} API, which is now deprecated:</p>
+
+<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>
+
+<h3 id="Example_for_creating_a_URL_to_a_typed_array_using_a_blob">Example for creating a URL to a typed array using a blob</h3>
+
+<p>The following code:</p>
+
+<pre class="brush: js">var typedArray = GetTheTypedArraySomehow();
+var blob = new Blob([typedArray.buffer], {type: 'application/octet-stream'}); // pass a useful mime type here
+var url = URL.createObjectURL(blob);
+// url will be something like: blob:d3958f5c-0777-0845-9dcf-2cb28783acaf
+// now you can use the url in any context that regular URLs can be used in, for example img.src, etc.
+</pre>
+
+<h3 id="Example_for_extracting_data_from_a_Blob">Example for extracting data from a Blob</h3>
+
+<p>One way to read content from a Blob is to use a {{domxref("FileReader")}}. The following code reads the content of a Blob as a typed array:</p>
+
+<pre class="brush: js">var reader = new FileReader();
+reader.addEventListener("loadend", function() {
+   // reader.result contains the contents of blob as a typed array
+});
+reader.readAsArrayBuffer(blob);</pre>
+
+<p>Another way to read content from a Blob is to use a Response. The following code reads the content of a Blob as text:</p>
+
+<pre class="brush: js">var text = await (new Response(blob)).text();
+</pre>
+
+<p>By using other methods of {{domxref("FileReader")}}, it is possible to read the contents of a Blob as a string or a data URL.</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('File API','#blob','Blob')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Blob")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("BlobBuilder")}}</li>
+ <li>{{domxref("FileReader")}}</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/fa/web/api/canvasrenderingcontext2d/createlineargradient/index.html b/files/fa/web/api/canvasrenderingcontext2d/createlineargradient/index.html
new file mode 100644
index 0000000000..d7a1e1bde6
--- /dev/null
+++ b/files/fa/web/api/canvasrenderingcontext2d/createlineargradient/index.html
@@ -0,0 +1,114 @@
+---
+title: CanvasRenderingContext2D.createLinearGradient()
+slug: Web/API/CanvasRenderingContext2D/createLinearGradient
+translation_of: Web/API/CanvasRenderingContext2D/createLinearGradient
+---
+<div>{{APIRef}}</div>
+
+<p>The <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.createLinearGradient()</code></strong> method of the Canvas 2D API creates a gradient along the line connecting two given coordinates.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14681/mdn-canvas-linearGradient.png" style="height: 121px; width: 264px;"></p>
+
+<p>This method returns a linear {{domxref("CanvasGradient")}}. To be applied to a shape, the gradient must first be assigned to the {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}} or {{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle")}} properties.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Gradient coordinates are global, i.e., relative to the current coordinate space. When applied to a shape, the coordinates are NOT relative to the shape's coordinates.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">CanvasGradient <var>ctx</var>.createLinearGradient(<var>x0</var>, <var>y0</var>, <var>x1</var>, <var>y1</var>);
+</pre>
+
+<p>The <code>createLinearGradient()</code> method is specified by four parameters defining the start and end points of the gradient line.</p>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>x0</code></dt>
+ <dd>The x-axis coordinate of the start point.</dd>
+ <dt><code>y0</code></dt>
+ <dd>The y-axis coordinate of the start point.</dd>
+ <dt><code>x1</code></dt>
+ <dd>The x-axis coordinate of the end point.</dd>
+ <dt><code>y1</code></dt>
+ <dd>The y-axis coordinate of the end point.</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<dl>
+ <dt>{{domxref("CanvasGradient")}}</dt>
+ <dd>A linear <code>CanvasGradient</code> initialized with the specified line.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Filling_a_rectangle_with_a_linear_gradient">Filling a rectangle with a linear gradient</h3>
+
+<p>This example initializes a linear gradient using the <code>createLinearGradient()</code> method. Three color stops between the gradient's start and end points are then created. Finally, the gradient is assigned to the canvas context, and is rendered to a filled rectangle.</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:[7]">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+// Create a linear gradient
+// The start gradient point is at x=20, y=0
+// The end gradient point is at x=220, y=0
+var gradient = ctx.createLinearGradient(20,0, 220,0);
+
+// Add three color stops
+gradient.addColorStop(0, 'green');
+gradient.addColorStop(.5, 'cyan');
+gradient.addColorStop(1, 'green');
+
+// Set the fill style and draw a rectangle
+ctx.fillStyle = gradient;
+ctx.fillRect(20, 20, 200, 100);
+</pre>
+
+<h4 id="Result">Result</h4>
+
+<p>{{ EmbedLiveSample('Filling_a_rectangle_with_a_linear_gradient', 700, 180) }}</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-createlineargradient", "CanvasRenderingContext2D.createLinearGradient")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.CanvasRenderingContext2D.createLinearGradient")}}</p>
+
+<h3 id="Gecko-specific_notes">Gecko-specific notes</h3>
+
+<ul>
+ <li>Starting with Gecko 2.0 {{geckoRelease("2.0")}}, specifying non-finite values now throws <code>NOT_SUPPORTED_ERR</code> instead of <code>SYNTAX_ERR</code>.</li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The interface defining this method: {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.createRadialGradient()")}}</li>
+</ul>
diff --git a/files/fa/web/api/canvasrenderingcontext2d/index.html b/files/fa/web/api/canvasrenderingcontext2d/index.html
new file mode 100644
index 0000000000..3b9cc7021e
--- /dev/null
+++ b/files/fa/web/api/canvasrenderingcontext2d/index.html
@@ -0,0 +1,424 @@
+---
+title: CanvasRenderingContext2D
+slug: Web/API/CanvasRenderingContext2D
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Games
+  - Graphics
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+translation_of: Web/API/CanvasRenderingContext2D
+---
+<div>{{APIRef}}</div>
+
+<p><span class="seoSummary">The <code><strong>CanvasRenderingContext2D</strong></code> interface, part of the <a href="/en-US/docs/Web/API/Canvas_API">Canvas API</a>, provides the 2D rendering context for the drawing surface of a {{HTMLElement("canvas")}} element. It is used for drawing shapes, text, images, and other objects.</span></p>
+
+<p>See the interface's properties and methods in the sidebar and below. The <a href="/en-US/docs/Web/API/Canvas_API/Tutorial" title="Canvas tutorial">Canvas tutorial</a> has more explanation, examples, and resources, as well.</p>
+
+<h2 id="Basic_example">Basic example</h2>
+
+<p>To get a <code>CanvasRenderingContext2D</code> instance, you must first have an HTML <code>&lt;canvas&gt;</code> element to work with:</p>
+
+<pre class="brush: html">&lt;canvas id="my-house" width="300" height="300"&gt;&lt;/canvas&gt;</pre>
+
+<p>To get the canvas' 2D rendering context, call {{domxref("HTMLCanvasElement.getContext()", "getContext()")}} on the <code>&lt;canvas&gt;</code> element, supplying <code>'2d'</code> as the argument:</p>
+
+<pre class="brush: js">const canvas = document.getElementById('my-house');
+const ctx = canvas.getContext('2d');
+</pre>
+
+<p>With the context in hand, you can draw anything you like. This code draws a house:</p>
+
+<pre class="brush: js">// Set line width
+ctx.lineWidth = 10;
+
+// Wall
+ctx.strokeRect(75, 140, 150, 110);
+
+// Door
+ctx.fillRect(130, 190, 40, 60);
+
+// Roof
+ctx.beginPath();
+ctx.moveTo(50, 140);
+ctx.lineTo(150, 60);
+ctx.lineTo(250, 140);
+ctx.closePath();
+ctx.stroke();
+</pre>
+
+<p>The resulting drawing looks like this:</p>
+
+<p>{{EmbedLiveSample("Basic_example", 700, 330)}}</p>
+
+<h2 id="Reference">Reference</h2>
+
+<h3 id="Drawing_rectangles">Drawing rectangles</h3>
+
+<p>There are three methods that immediately draw rectangles to the canvas.</p>
+
+<dl>
+	<dt>{{domxref("CanvasRenderingContext2D.clearRect()")}}</dt>
+	<dd>Sets all pixels in the rectangle defined by starting point <em>(x, y)</em> and size <em>(width, height)</em> to transparent black, erasing any previously drawn content.</dd>
+	<dt>{{domxref("CanvasRenderingContext2D.fillRect()")}}</dt>
+	<dd>Draws a filled rectangle at <em>(x, y) </em>position whose size is determined by <em>width</em> and <em>height</em>.</dd>
+	<dt>{{domxref("CanvasRenderingContext2D.strokeRect()")}}</dt>
+	<dd>Paints a rectangle which has a starting point at <em>(x, y)</em> and has a<em> w</em> width and an <em>h</em> height onto the canvas, using the current stroke style.</dd>
+</dl>
+
+<h3 id="Drawing_text">Drawing text</h3>
+
+<p>The following methods draw text. See also the {{domxref("TextMetrics")}} object for text properties.</p>
+
+<dl>
+	<dt>{{domxref("CanvasRenderingContext2D.fillText()")}}</dt>
+	<dd>Draws (fills) a given text at the given (x, y) position.</dd>
+	<dt>{{domxref("CanvasRenderingContext2D.strokeText()")}}</dt>
+	<dd>Draws (strokes) a given text at the given (x, y)<em> </em>position.</dd>
+	<dt>{{domxref("CanvasRenderingContext2D.measureText()")}}</dt>
+	<dd>Returns a {{domxref("TextMetrics")}} object.</dd>
+</dl>
+
+<h3 id="Line_styles">Line styles</h3>
+
+<p>The following methods and properties control how lines are drawn.</p>
+
+<dl>
+	<dt>{{domxref("CanvasRenderingContext2D.lineWidth")}}</dt>
+	<dd>Width of lines. Default <code>1.0</code>.</dd>
+	<dt>{{domxref("CanvasRenderingContext2D.lineCap")}}</dt>
+	<dd>Type of endings on the end of lines. Possible values: <code>butt</code> (default), <code>round</code>, <code>square</code>.</dd>
+	<dt>{{domxref("CanvasRenderingContext2D.lineJoin")}}</dt>
+	<dd>Defines the type of corners where two lines meet. Possible values: <code>round</code>, <code>bevel</code>, <code>miter</code> (default).</dd>
+	<dt>{{domxref("CanvasRenderingContext2D.miterLimit")}}</dt>
+	<dd>Miter limit ratio. Default <code>10</code>.</dd>
+	<dt>{{domxref("CanvasRenderingContext2D.getLineDash()")}}</dt>
+	<dd>Returns the current line dash pattern array containing an even number of non-negative numbers.</dd>
+	<dt>{{domxref("CanvasRenderingContext2D.setLineDash()")}}</dt>
+	<dd>Sets the current line dash pattern.</dd>
+	<dt>{{domxref("CanvasRenderingContext2D.lineDashOffset")}}</dt>
+	<dd>Specifies where to start a dash array on a line.</dd>
+</dl>
+
+<h3 id="Text_styles">Text styles</h3>
+
+<p>The following properties control how text is laid out.</p>
+
+<dl>
+	<dt>{{domxref("CanvasRenderingContext2D.font")}}</dt>
+	<dd>Font setting. Default value <code>10px sans-serif</code>.</dd>
+	<dt>{{domxref("CanvasRenderingContext2D.textAlign")}}</dt>
+	<dd>Text alignment setting. Possible values: <code>start</code> (default), <code>end</code>, <code>left</code>, <code>right</code>, <code>center</code>.</dd>
+	<dt>{{domxref("CanvasRenderingContext2D.textBaseline")}}</dt>
+	<dd>Baseline alignment setting. Possible values: <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>Directionality. Possible values: <code>ltr</code>, <code>rtl</code>, <code>inherit</code> (default).</dd>
+</dl>
+
+<h3 id="Fill_and_stroke_styles">Fill and stroke styles</h3>
+
+<p>Fill styling is used for colors and styles inside shapes and stroke styling is used for the lines around shapes.</p>
+
+<dl>
+	<dt>{{domxref("CanvasRenderingContext2D.fillStyle")}}</dt>
+	<dd>Color or style to use inside shapes. Default <code>#000</code> (black).</dd>
+	<dt>{{domxref("CanvasRenderingContext2D.strokeStyle")}}</dt>
+	<dd>Color or style to use for the lines around shapes. Default <code>#000</code> (black).</dd>
+</dl>
+
+<h3 id="Gradients_and_patterns">Gradients and patterns</h3>
+
+<dl>
+	<dt>{{domxref("CanvasRenderingContext2D.createLinearGradient()")}}</dt>
+	<dd>Creates a linear gradient along the line given by the coordinates represented by the parameters.</dd>
+	<dt>{{domxref("CanvasRenderingContext2D.createRadialGradient()")}}</dt>
+	<dd>Creates a radial gradient given by the coordinates of the two circles represented by the parameters.</dd>
+	<dt>{{domxref("CanvasRenderingContext2D.createPattern()")}}</dt>
+	<dd>Creates a pattern using the specified image (a {{domxref("CanvasImageSource")}}). It repeats the source in the directions specified by the repetition argument. This method returns a {{domxref("CanvasPattern")}}.</dd>
+</dl>
+
+<h3 id="Shadows">Shadows</h3>
+
+<dl>
+	<dt>{{domxref("CanvasRenderingContext2D.shadowBlur")}}</dt>
+	<dd>Specifies the blurring effect. Default: <code>0</code></dd>
+	<dt>{{domxref("CanvasRenderingContext2D.shadowColor")}}</dt>
+	<dd>Color of the shadow. Default: fully-transparent black.</dd>
+	<dt>{{domxref("CanvasRenderingContext2D.shadowOffsetX")}}</dt>
+	<dd>Horizontal distance the shadow will be offset. Default: <code>0</code>.</dd>
+	<dt>{{domxref("CanvasRenderingContext2D.shadowOffsetY")}}</dt>
+	<dd>Vertical distance the shadow will be offset. Default: <code>0</code>.</dd>
+</dl>
+
+<h3 id="Paths">Paths</h3>
+
+<p>The following methods can be used to manipulate paths of objects.</p>
+
+<dl>
+	<dt>{{domxref("CanvasRenderingContext2D.beginPath()")}}</dt>
+	<dd>Starts a new path by emptying the list of sub-paths. Call this method when you want to create a new path.</dd>
+	<dt>{{domxref("CanvasRenderingContext2D.closePath()")}}</dt>
+	<dd>Causes the point of the pen to move back to the start of the current sub-path. It tries to draw a straight line from the current point to the start. If the shape has already been closed or has only one point, this function does nothing.</dd>
+	<dt>{{domxref("CanvasRenderingContext2D.moveTo()")}}</dt>
+	<dd>Moves the starting point of a new sub-path to the (x, y) coordinates.</dd>
+	<dt>{{domxref("CanvasRenderingContext2D.lineTo()")}}</dt>
+	<dd>Connects the last point in the current sub-path to the specified (x, y) coordinates with a straight line.</dd>
+	<dt>{{domxref("CanvasRenderingContext2D.bezierCurveTo()")}}</dt>
+	<dd>Adds a cubic Bézier curve to the current path.</dd>
+	<dt>{{domxref("CanvasRenderingContext2D.quadraticCurveTo()")}}</dt>
+	<dd>Adds a quadratic Bézier curve to the current path.</dd>
+	<dt>{{domxref("CanvasRenderingContext2D.arc()")}}</dt>
+	<dd>Adds a circular arc to the current path.</dd>
+	<dt>{{domxref("CanvasRenderingContext2D.arcTo()")}}</dt>
+	<dd>Adds an arc to the current path with the given control points and radius, connected to the previous point by a straight line.</dd>
+	<dt>{{domxref("CanvasRenderingContext2D.ellipse()")}}</dt>
+	<dd>Adds an elliptical arc to the current path.</dd>
+	<dt>{{domxref("CanvasRenderingContext2D.rect()")}}</dt>
+	<dd>Creates a path for a rectangle at<em> </em>position (x, y) with a size that is determined by <em>width</em> and <em>height</em>.</dd>
+</dl>
+
+<h3 id="Drawing_paths">Drawing paths</h3>
+
+<dl>
+	<dt>{{domxref("CanvasRenderingContext2D.fill()")}}</dt>
+	<dd>Fills the current sub-paths with the current fill style.</dd>
+	<dt>{{domxref("CanvasRenderingContext2D.stroke()")}}</dt>
+	<dd>Strokes the current sub-paths with the current stroke style.</dd>
+	<dt>{{domxref("CanvasRenderingContext2D.drawFocusIfNeeded()")}}</dt>
+	<dd>If a given element is focused, this method draws a focus ring around the current path.</dd>
+	<dt>{{domxref("CanvasRenderingContext2D.scrollPathIntoView()")}}</dt>
+	<dd>Scrolls the current path or a given path into the view.</dd>
+	<dt>{{domxref("CanvasRenderingContext2D.clip()")}}</dt>
+	<dd>Creates a clipping path from the current sub-paths. Everything drawn after <code>clip()</code> is called appears inside the clipping path only. For an example, see <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing" title="Clipping paths">Clipping paths</a> in the Canvas tutorial.</dd>
+	<dt>{{domxref("CanvasRenderingContext2D.isPointInPath()")}}</dt>
+	<dd>Reports whether or not the specified point is contained in the current path.</dd>
+	<dt>{{domxref("CanvasRenderingContext2D.isPointInStroke()")}}</dt>
+	<dd>Reports whether or not the specified point is inside the area contained by the stroking of a path.</dd>
+</dl>
+
+<h3 id="Transformations">Transformations</h3>
+
+<p>Objects in the <code>CanvasRenderingContext2D</code> rendering context have a current transformation matrix and methods to manipulate it. The transformation matrix is applied when creating the current default path, painting text, shapes and {{domxref("Path2D")}} objects. The methods listed below remain for historical and compatibility reasons as {{domxref("SVGMatrix")}} objects are used in most parts of the API nowadays and will be used in the future instead.</p>
+
+<dl>
+	<dt>{{domxref("CanvasRenderingContext2D.currentTransform")}} {{experimental_inline}}</dt>
+	<dd>Current transformation matrix ({{domxref("SVGMatrix")}} object).</dd>
+	<dt>{{domxref("CanvasRenderingContext2D.getTransform")}}</dt>
+	<dd>Retrieves the current transformation matrix being applied to the context.</dd>
+	<dt>{{domxref("CanvasRenderingContext2D.rotate()")}}</dt>
+	<dd>Adds a rotation to the transformation matrix. The angle argument represents a clockwise rotation angle and is expressed in radians.</dd>
+	<dt>{{domxref("CanvasRenderingContext2D.scale()")}}</dt>
+	<dd>Adds a scaling transformation to the canvas units by x horizontally and by y vertically.</dd>
+	<dt>{{domxref("CanvasRenderingContext2D.translate()")}}</dt>
+	<dd>Adds a translation transformation by moving the canvas and its origin x horzontally and y vertically on the grid.</dd>
+	<dt>{{domxref("CanvasRenderingContext2D.transform()")}}</dt>
+	<dd>Multiplies the current transformation matrix with the matrix described by its arguments.</dd>
+	<dt>{{domxref("CanvasRenderingContext2D.setTransform()")}}</dt>
+	<dd>Resets the current transform to the identity matrix, and then invokes the <code>transform()</code> method with the same arguments.</dd>
+	<dt>{{domxref("CanvasRenderingContext2D.resetTransform()")}} {{experimental_inline}}</dt>
+	<dd>Resets the current transform by the identity matrix.</dd>
+</dl>
+
+<h3 id="Compositing">Compositing</h3>
+
+<dl>
+	<dt>{{domxref("CanvasRenderingContext2D.globalAlpha")}}</dt>
+	<dd>Alpha value that is applied to shapes and images before they are composited onto the canvas. Default <code>1.0</code> (opaque).</dd>
+	<dt>{{domxref("CanvasRenderingContext2D.globalCompositeOperation")}}</dt>
+	<dd>With <code>globalAlpha</code> applied this sets how shapes and images are drawn onto the existing bitmap.</dd>
+</dl>
+
+<h3 id="Drawing_images">Drawing images</h3>
+
+<dl>
+	<dt>{{domxref("CanvasRenderingContext2D.drawImage()")}}</dt>
+	<dd>Draws the specified image. This method is available in multiple formats, providing a great deal of flexibility in its use.</dd>
+</dl>
+
+<h3 id="Pixel_manipulation">Pixel manipulation</h3>
+
+<p>See also the {{domxref("ImageData")}} object.</p>
+
+<dl>
+	<dt>{{domxref("CanvasRenderingContext2D.createImageData()")}}</dt>
+	<dd>Creates a new, blank {{domxref("ImageData")}} object with the specified dimensions. All of the pixels in the new object are transparent black.</dd>
+	<dt>{{domxref("CanvasRenderingContext2D.getImageData()")}}</dt>
+	<dd>Returns an {{domxref("ImageData")}} object representing the underlying pixel data for the area of the canvas denoted by the rectangle which starts at <em>(sx, sy)</em> and has an <em>sw</em> width and <em>sh</em> height.</dd>
+	<dt>{{domxref("CanvasRenderingContext2D.putImageData()")}}</dt>
+	<dd>Paints data from the given {{domxref("ImageData")}} object onto the bitmap. If a dirty rectangle is provided, only the pixels from that rectangle are painted.</dd>
+</dl>
+
+<h3 id="Image_smoothing">Image smoothing</h3>
+
+<dl>
+	<dt>{{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}} {{experimental_inline}}</dt>
+	<dd>Image smoothing mode; if disabled, images will not be smoothed if scaled.</dd>
+</dl>
+
+<dl>
+	<dt>{{domxref("CanvasRenderingContext2D.imageSmoothingQuality")}} {{experimental_inline}}</dt>
+	<dd>Allows you to set the quality of image smoothing.</dd>
+</dl>
+
+<h3 id="The_canvas_state">The canvas state</h3>
+
+<p>The <code>CanvasRenderingContext2D</code> rendering context contains a variety of drawing style states (attributes for line styles, fill styles, shadow styles, text styles). The following methods help you to work with that state:</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="Hit_regions">Hit regions</h3>
+
+<dl>
+	<dt>{{domxref("CanvasRenderingContext2D.addHitRegion()")}} {{experimental_inline}}</dt>
+	<dd>Adds a hit region to the canvas.</dd>
+	<dt>{{domxref("CanvasRenderingContext2D.removeHitRegion()")}} {{experimental_inline}}</dt>
+	<dd>Removes the hit region with the specified <code>id</code> from the canvas.</dd>
+	<dt>{{domxref("CanvasRenderingContext2D.clearHitRegions()")}} {{experimental_inline}}</dt>
+	<dd>Removes all hit regions from the canvas.</dd>
+</dl>
+
+<h3 id="Filters">Filters</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="Non-standard_APIs">Non-standard APIs</h2>
+
+<h3 id="Blink_and_WebKit">Blink and WebKit</h3>
+
+<p>Most of these APIs are <a href="https://code.google.com/p/chromium/issues/detail?id=363198">deprecated and were removed shortly after Chrome 36</a>.</p>
+
+<dl>
+	<dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.clearShadow()</code></dt>
+	<dd>Removes all shadow settings like {{domxref("CanvasRenderingContext2D.shadowColor")}} and {{domxref("CanvasRenderingContext2D.shadowBlur")}}.</dd>
+	<dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.drawImageFromRect()</code></dt>
+	<dd>This is redundant with an equivalent overload of <code>drawImage</code>.</dd>
+	<dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.setAlpha()</code></dt>
+	<dd>Use {{domxref("CanvasRenderingContext2D.globalAlpha")}} instead.</dd>
+	<dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.setCompositeOperation()</code></dt>
+	<dd>Use {{domxref("CanvasRenderingContext2D.globalCompositeOperation")}} instead.</dd>
+	<dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.setLineWidth()</code></dt>
+	<dd>Use {{domxref("CanvasRenderingContext2D.lineWidth")}} instead.</dd>
+	<dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.setLineJoin()</code></dt>
+	<dd>Use {{domxref("CanvasRenderingContext2D.lineJoin")}} instead.</dd>
+	<dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.setLineCap()</code></dt>
+	<dd>Use {{domxref("CanvasRenderingContext2D.lineCap")}} instead.</dd>
+	<dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.setMiterLimit()</code></dt>
+	<dd>Use {{domxref("CanvasRenderingContext2D.miterLimit")}} instead.</dd>
+	<dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.setStrokeColor()</code></dt>
+	<dd>Use {{domxref("CanvasRenderingContext2D.strokeStyle")}} instead.</dd>
+	<dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.setFillColor()</code></dt>
+	<dd>Use {{domxref("CanvasRenderingContext2D.fillStyle")}} instead.</dd>
+	<dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.setShadow()</code></dt>
+	<dd>Use {{domxref("CanvasRenderingContext2D.shadowColor")}} and {{domxref("CanvasRenderingContext2D.shadowBlur")}} instead.</dd>
+	<dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.webkitLineDash</code></dt>
+	<dd>Use {{domxref("CanvasRenderingContext2D.getLineDash()")}} and {{domxref("CanvasRenderingContext2D.setLineDash()")}} instead.</dd>
+	<dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.webkitLineDashOffset</code></dt>
+	<dd>Use {{domxref("CanvasRenderingContext2D.lineDashOffset")}} instead.</dd>
+	<dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.webkitImageSmoothingEnabled</code></dt>
+	<dd>Use {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}} instead.</dd>
+</dl>
+
+<h3 id="Blink_only">Blink only</h3>
+
+<dl>
+	<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}} {{obsolete_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}} {{obsolete_inline}} <code>CanvasRenderingContext2D.webkitGetImageDataHD</code></dt>
+	<dd>Intended for HD backing stores, but removed from canvas specifications.</dd>
+	<dt>{{non-standard_inline}} {{obsolete_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>
+
+<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.mozImageSmoothingEnabled</code></dt>
+	<dd>See {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}}.</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.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', "#2dcontext", "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>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+	<li>{{domxref("HTMLCanvasElement")}}</li>
+	<li>{{HTMLElement("canvas")}}</li>
+</ul>
diff --git a/files/fa/web/api/element/getboundingclientrect/index.html b/files/fa/web/api/element/getboundingclientrect/index.html
new file mode 100644
index 0000000000..3ec032bead
--- /dev/null
+++ b/files/fa/web/api/element/getboundingclientrect/index.html
@@ -0,0 +1,90 @@
+---
+title: Element.getBoundingClientRect()
+slug: Web/API/Element/getBoundingClientRect
+translation_of: Web/API/Element/getBoundingClientRect
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p style="direction: rtl;"><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;"> روال </span></font><strong>Element.getBoundingClientRect() اندازه و محل قرار گیری نسبی یک ایتم را  در صفحه باز می گرداند </strong></code></p>
+
+<p style="direction: rtl;"> </p>
+
+<h2 id="ترکیب" style="direction: rtl;">ترکیب</h2>
+
+<pre class="syntaxbox" style="direction: rtl;">var <a href="/en-US/docs/Web/API/DOMRect">domRect</a> = <a href="/en-US/docs/Web/API/Element">element</a>.getBoundingClientRect();</pre>
+
+<h3 id="Value">Value</h3>
+
+<p style="direction: rtl;">مقدار بازگشتی تابع {{domxref("DOMRect")}} شی ای می باشد که با اجتماع مسطتیلی که با آیتم  {{domxref("Element.getClientRects", "getClientRects()")}} بازگشت می شود.</p>
+
+<p style="direction: rtl;">The returned value is a {{domxref("DOMRect")}} object which is the union of the rectangles returned by {{domxref("Element.getClientRects", "getClientRects()")}} for the element, i.e., the CSS border-boxes associated with the element. The result is the smallest rectangle which contains the entire element, with read-only <code>left</code>, <code>top</code>, <code>right</code>, <code>bottom</code>, <code>x</code>, <code>y</code>, <code>width</code>, and <code>height</code> properties describing the overall border-box in pixels. Properties other than <code>width</code> and <code>height</code> are relative to the top-left of the viewport.</p>
+
+<p>Empty border-boxes are completely ignored. If all the element's border-boxes are empty, then a rectangle is returned with a <code>width</code> and <code>height</code> of zero and where the <code>top</code> and <code>left</code> are the top-left of the border-box for the first CSS box (in content order) for the element.</p>
+
+<p>The amount of scrolling that has been done of the viewport area (or any other scrollable element) is taken into account when computing the bounding rectangle. This means that the rectangle's boundary edges (<font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.498039);">top, right, bottom, left</span></font>) change their values every time the scrolling position changes (because their values are relative to the viewport and not absolute). If you need the bounding rectangle relative to the top-left corner of the document, just add the current scrolling position to the <code>top</code> and <code>left</code> properties (these can be obtained using {{domxref("window.scrollX")}} and {{domxref("window.scrollY")}}) to get a bounding rectangle which is independent from the current scrolling position.</p>
+
+<p>Scripts requiring high cross-browser compatibility can use {{domxref("window.pageXOffset")}} and {{domxref("window.pageYOffset")}} instead of <code>window.scrollX</code> and <code>window.scrollY.</code> Scripts without access to these properties can use code like this:</p>
+
+<pre class="brush:js">// For scrollX
+(((t = document.documentElement) || (t = document.body.parentNode))
+  &amp;&amp; typeof t.scrollLeft == 'number' ? t : document.body).scrollLeft
+// For scrollY
+(((t = document.documentElement) || (t = document.body.parentNode))
+  &amp;&amp; typeof t.scrollTop == 'number' ? t : document.body).scrollTop
+</pre>
+
+<h2 id="مثال" style="direction: rtl;">مثال</h2>
+
+<pre class="brush:js">// rect is a DOMRect object with eight properties: left, top, right, bottom, x, y, width, height
+var rect = obj.getBoundingClientRect();
+</pre>
+
+<h2 id="ویژگی_ها" style="direction: rtl;">ویژگی ها</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("CSSOM View", "#dom-element-getboundingclientrect", "Element.getBoundingClientRect()")}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Notes">Notes</h3>
+
+<p>The returned <code>DOMRect</code> object can be modified in modern browsers. This was not true with older versions which effectively returned <code>DOMRectReadOnly</code>.  With IE and Edge, not being able to add missing properties to their returned <a href="https://msdn.microsoft.com/en-us/library/hh826029(VS.85).aspx"><code>ClientRect</code></a>, object prevents backfilling <code>x</code> and <code>y</code>.</p>
+
+<p>Due to compatibility problems (see below), it is safest to rely on only properties <code>left</code>, <code>top</code>, <code>right</code>, and <code>bottom</code>. </p>
+
+<p>Properties in the returned <code>DOMRect</code> object are not own properties. While the <code>in</code> operator and <code>for...in</code> will find returned properties, other APIs such as <code>Object.keys()</code> will fail. Moreover, and unexpectedly, the ES2015 and newer features such as <code>Object.assign()</code> and object rest/spread will fail to copy returned properties.</p>
+
+<pre class="brush: js">rect = elt.getBoundingClientRect()
+// The result in emptyObj is {}
+emptyObj = Object.assign({}, rect)
+emptyObj = { ...rect }
+{width, ...emptyObj} = rect
+</pre>
+
+<p><code>DOMRect</code> properties <code>top</code> <code>left</code> <code>right</code> <code>bottom</code> are computed from the other property values.</p>
+
+<h2 id="سازگاری_با_مرورگر_ها" style="direction: rtl;">سازگاری با مرورگر ها</h2>
+
+<div class="hidden" style="direction: rtl;">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("api.Element.getBoundingClientRect")}}</p>
+
+<h2 id="همچنین" style="direction: rtl;">همچنین</h2>
+
+<ul>
+ <li><code><a href="/en-US/docs/DOM/element.getClientRects">getClientRects()</a></code></li>
+ <li><a href="https://msdn.microsoft.com/en-us/library/ms536433(VS.85).aspx">MSDN: <code>getBoundingClientRect</code></a></li>
+ <li><a href="https://msdn.microsoft.com/en-us/library/hh826029(VS.85).aspx">MSDN: <code>ClientRect</code></a>, an earlier version of <code>DOMRect</code></li>
+</ul>
diff --git a/files/fa/web/api/element/index.html b/files/fa/web/api/element/index.html
new file mode 100644
index 0000000000..a0d4f8ee21
--- /dev/null
+++ b/files/fa/web/api/element/index.html
@@ -0,0 +1,331 @@
+---
+title: Element
+slug: Web/API/Element
+tags:
+  - API
+  - DOM
+  - DOM Reference
+  - Element
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - Web API
+translation_of: Web/API/Element
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><span class="seoSummary"><strong><code>Element</code></strong> is the most general base class from which all objects in a {{DOMxRef("Document")}} inherit. It only has methods and properties common to all kinds of elements. More specific classes inherit from <code>Element</code>.</span> For example, the {{DOMxRef("HTMLElement")}} interface is the base interface for HTML elements, while the {{DOMxRef("SVGElement")}} interface is the basis for all SVG elements. Most functionality is specified further down the class hierarchy.</p>
+
+<p>Languages outside the realm of the Web platform, like XUL through the <code>XULElement</code> interface, also implement <code>Element</code>.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Properties" name="Properties">Properties</h2>
+
+<p><em>Inherits properties from its parent interface, {{DOMxRef("Node")}}, and by extension that interface's parent, {{DOMxRef("EventTarget")}}. It implements the properties of {{DOMxRef("ParentNode")}}, {{DOMxRef("ChildNode")}}, {{DOMxRef("NonDocumentTypeChildNode")}}, </em>and {{DOMxRef("Animatable")}}.</p>
+
+<dl>
+ <dt>{{DOMxRef("Element.attributes")}} {{readOnlyInline}}</dt>
+ <dd>Returns a {{DOMxRef("NamedNodeMap")}} object containing the assigned attributes of the corresponding HTML element.</dd>
+ <dt>{{DOMxRef("Element.classList")}} {{readOnlyInline}}</dt>
+ <dd>Returns a {{DOMxRef("DOMTokenList")}} containing the list of class attributes.</dd>
+ <dt>{{DOMxRef("Element.className")}}</dt>
+ <dd>Is a {{DOMxRef("DOMString")}} representing the class of the element.</dd>
+ <dt>{{DOMxRef("Element.clientHeight")}} {{readOnlyInline}}</dt>
+ <dd>Returns a {{jsxref("Number")}} representing the inner height of the element.</dd>
+ <dt>{{DOMxRef("Element.clientLeft")}} {{readOnlyInline}}</dt>
+ <dd>Returns a {{jsxref("Number")}} representing the width of the left border of the element.</dd>
+ <dt>{{DOMxRef("Element.clientTop")}}  {{readOnlyInline}}</dt>
+ <dd>Returns a {{jsxref("Number")}} representing the width of the top border of the element.</dd>
+ <dt>{{DOMxRef("Element.clientWidth")}} {{readOnlyInline}}</dt>
+ <dd>Returns a {{jsxref("Number")}} representing the inner width of the element.</dd>
+ <dt>{{DOMxRef("Element.computedName")}} {{readOnlyInline}}</dt>
+ <dd>Returns a {{DOMxRef("DOMString")}} containing the label exposed to accessibility.</dd>
+ <dt>{{DOMxRef("Element.computedRole")}} {{readOnlyInline}}</dt>
+ <dd>Returns a {{DOMxRef("DOMString")}} containing the ARIA role that has been applied to a particular element. </dd>
+ <dt>{{DOMxRef("Element.id")}}</dt>
+ <dd>Is a {{DOMxRef("DOMString")}} representing the id of the element.</dd>
+ <dt>{{DOMxRef("Element.innerHTML")}}</dt>
+ <dd>Is a {{DOMxRef("DOMString")}} representing the markup of the element's content.</dd>
+ <dt>{{DOMxRef("Element.localName")}} {{readOnlyInline}}</dt>
+ <dd>A {{DOMxRef("DOMString")}} representing the local part of the qualified name of the element.</dd>
+ <dt>{{DOMxRef("Element.namespaceURI")}} {{readonlyInline}}</dt>
+ <dd>The namespace URI of the element, or <code>null</code> if it is no namespace.
+ <div class="note">
+ <p><strong>Note:</strong> In Firefox 3.5 and earlier, HTML elements are in no namespace. In later versions, HTML elements are in the <code><a class="linkification-ext external" href="http://www.w3.org/1999/xhtml" title="Linkification: http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a></code> namespace in both HTML and XML trees. {{ gecko_minversion_inline("1.9.2")}}</p>
+ </div>
+ </dd>
+ <dt>{{DOMxRef("NonDocumentTypeChildNode.nextElementSibling")}} {{readOnlyInline}}</dt>
+ <dd>Is an {{DOMxRef("Element")}}, the element immediately following the given one in the tree, or <code>null</code> if there's no sibling node.</dd>
+ <dt>{{DOMxRef("Element.outerHTML")}}</dt>
+ <dd>Is a {{DOMxRef("DOMString")}} representing the markup of the element including its content. When used as a setter, replaces the element with nodes parsed from the given string.</dd>
+ <dt>{{DOMxRef("Element.prefix")}} {{readOnlyInline}}</dt>
+ <dd>A {{DOMxRef("DOMString")}} representing the namespace prefix of the element, or <code>null</code> if no prefix is specified.</dd>
+ <dt>{{DOMxRef("NonDocumentTypeChildNode.previousElementSibling")}} {{readOnlyInline}}</dt>
+ <dd>Is a {{DOMxRef("Element")}}, the element immediately preceding the given one in the tree, or <code>null</code> if there is no sibling element.</dd>
+ <dt>{{DOMxRef("Element.scrollHeight")}}  {{readOnlyInline}}</dt>
+ <dd>Returns a {{jsxref("Number")}} representing the scroll view height of an element.</dd>
+ <dt>{{DOMxRef("Element.scrollLeft")}}</dt>
+ <dd>Is a {{jsxref("Number")}} representing the left scroll offset of the element.</dd>
+ <dt>{{DOMxRef("Element.scrollLeftMax")}} {{Non-standard_Inline}} {{readOnlyInline}}</dt>
+ <dd>Returns a {{jsxref("Number")}} representing the maximum left scroll offset possible for the element.</dd>
+ <dt>{{DOMxRef("Element.scrollTop")}}</dt>
+ <dd>A {{jsxref("Number")}} representing number of pixels the top of the document is scrolled vertically.</dd>
+ <dt>{{DOMxRef("Element.scrollTopMax")}} {{Non-standard_Inline}} {{readOnlyInline}}</dt>
+ <dd>Returns a {{jsxref("Number")}} representing the maximum top scroll offset possible for the element.</dd>
+ <dt>{{DOMxRef("Element.scrollWidth")}} {{readOnlyInline}}</dt>
+ <dd>Returns a {{jsxref("Number")}} representing the scroll view width of the element.</dd>
+ <dt>{{DOMxRef("Element.shadowRoot")}}{{readOnlyInline}}</dt>
+ <dd>Returns the open shadow root that is hosted by the element, or null if no open shadow root is present.</dd>
+ <dt>{{DOMxRef("Element.openOrClosedShadowRoot")}} {{Non-standard_Inline}}{{readOnlyInline}}</dt>
+ <dd>Returns the shadow root that is hosted by the element, regardless if its open or closed. <strong>Available only to <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a>.</strong></dd>
+ <dt>{{DOMxRef("Element.slot")}} {{Experimental_Inline}}</dt>
+ <dd>Returns the name of the shadow DOM slot the element is inserted in.</dd>
+ <dt>{{DOMxRef("Element.tabStop")}} {{Non-standard_Inline}}</dt>
+ <dd>Is a {{jsxref("Boolean")}} indicating if the element can receive input focus via the tab key.</dd>
+ <dt>{{DOMxRef("Element.tagName")}} {{readOnlyInline}}</dt>
+ <dd>Returns a {{jsxref("String")}} with the name of the tag for the given element.</dd>
+ <dt>{{DOMxRef("Element.undoManager")}} {{Experimental_Inline}} {{readOnlyInline}}</dt>
+ <dd>Returns the {{DOMxRef("UndoManager")}} associated with the element.</dd>
+ <dt>{{DOMxRef("Element.undoScope")}} {{Experimental_Inline}}</dt>
+ <dd>Is a {{jsxref("Boolean")}} indicating if the element is an undo scope host, or not.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note:</strong> DOM Level 3 defined <code>namespaceURI</code>, <code>localName</code> and <code>prefix</code> on the {{DOMxRef("Node")}} interface. In DOM4 they were moved to <code>Element</code>.</p>
+
+<p>This change is implemented in Chrome since version 46.0 and Firefox since version 48.0.</p>
+</div>
+
+<h3 id="Properties_included_from_Slotable">Properties included from Slotable</h3>
+
+<p><em>The <code>Element</code> interface includes the following property, defined on the {{DOMxRef("Slotable")}} mixin.</em></p>
+
+<dl>
+ <dt>{{DOMxRef("Slotable.assignedSlot")}}{{readonlyInline}}</dt>
+ <dd>Returns a {{DOMxRef("HTMLSlotElement")}} representing the {{htmlelement("slot")}} the node is inserted in.</dd>
+</dl>
+
+<h3 id="Handlers" name="Handlers">Event handlers</h3>
+
+<dl>
+ <dt>{{domxref("Element.onfullscreenchange")}}</dt>
+ <dd>An event handler for the {{event("fullscreenchange")}} event, which is sent when the element enters or exits full-screen mode. This can be used to watch both for successful expected transitions, but also to watch for unexpected changes, such as when your app is backgrounded.</dd>
+ <dt>{{domxref("Element.onfullscreenerror")}}</dt>
+ <dd>An event handler for the {{event("fullscreenerror")}} event, which is sent when an error occurs while attempting to change into full-screen mode.</dd>
+</dl>
+
+<h4 id="Obsolete_event_handlers">Obsolete event handlers</h4>
+
+<dl>
+ <dt>{{DOMxRef("Element.onwheel")}}</dt>
+ <dd>Returns the event handling code for the {{Event("wheel")}} event. <strong>This is now implemented on {{DOMxRef("GlobalEventHandlers.onwheel", "GlobalEventHandlers")}}.</strong></dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Methods</h2>
+
+<p><em>Inherits methods from its parents {{DOMxRef("Node")}}, and its own parent, {{DOMxRef("EventTarget")}}<em>, and implements those of {{DOMxRef("ParentNode")}}, {{DOMxRef("ChildNode")}}<em>, {{DOMxRef("NonDocumentTypeChildNode")}}, </em></em>and {{DOMxRef("Animatable")}}.</em></p>
+
+<dl>
+ <dt>{{DOMxRef("EventTarget.addEventListener()")}}</dt>
+ <dd>Registers an event handler to a specific event type on the element.</dd>
+ <dt>{{DOMxRef("Element.attachShadow()")}}</dt>
+ <dd>Attatches a shadow DOM tree to the specified element and returns a reference to its {{DOMxRef("ShadowRoot")}}.</dd>
+ <dt>{{DOMxRef("Element.animate()")}} {{Experimental_Inline}}</dt>
+ <dd>A shortcut method to create and run an animation on an element. Returns the created Animation object instance.</dd>
+ <dt>{{DOMxRef("Element.closest()")}} {{Experimental_Inline}}</dt>
+ <dd>Returns the {{DOMxRef("Element")}} which is the closest ancestor of the current element (or the current element itself) which matches the selectors given in parameter.</dd>
+ <dt>{{DOMxRef("Element.createShadowRoot()")}} {{Non-standard_Inline}} {{Deprecated_Inline}}</dt>
+ <dd>Creates a <a href="/en-US/docs/Web/Web_Components/Shadow_DOM">shadow DOM</a> on on the element, turning it into a shadow host. Returns a {{DOMxRef("ShadowRoot")}}.</dd>
+ <dt>{{DOMxRef("Element.computedStyleMap()")}} {{Experimental_Inline}}</dt>
+ <dd>Returns a {{DOMxRef("StylePropertyMapReadOnly")}} interface which provides a read-only representation of a CSS declaration block that is an alternative to {{DOMxRef("CSSStyleDeclaration")}}.</dd>
+ <dt>{{DOMxRef("EventTarget.dispatchEvent()")}}</dt>
+ <dd>Dispatches an event to this node in the DOM and returns a {{jsxref("Boolean")}} that indicates whether no handler canceled the event.</dd>
+ <dt>{{DOMxRef("Element.getAnimations()")}} {{Experimental_Inline}}</dt>
+ <dd>Returns an array of Animation objects currently active on the element.</dd>
+ <dt>{{DOMxRef("Element.getAttribute()")}}</dt>
+ <dd>Retrieves the value of the named attribute from the current node and returns it as an {{jsxref("Object")}}.</dd>
+ <dt>{{DOMxRef("Element.getAttributeNames()")}}</dt>
+ <dd>Returns an array of attribute names from the current element.</dd>
+ <dt>{{DOMxRef("Element.getAttributeNS()")}}</dt>
+ <dd>Retrieves the value of the attribute with the specified name and namespace, from the current node and returns it as an {{jsxref("Object")}}.</dd>
+ <dt>{{DOMxRef("Element.getAttributeNode()")}} {{Obsolete_Inline}}</dt>
+ <dd>Retrieves the node representation of the named attribute from the current node and returns it as an {{DOMxRef("Attr")}}.</dd>
+ <dt>{{DOMxRef("Element.getAttributeNodeNS()")}} {{Obsolete_Inline}}</dt>
+ <dd>Retrieves the node representation of the attribute with the specified name and namespace, from the current node and returns it as an {{DOMxRef("Attr")}}.</dd>
+ <dt>{{DOMxRef("Element.getBoundingClientRect()")}}</dt>
+ <dd>Returns the size of an element and its position relative to the viewport.</dd>
+ <dt>{{DOMxRef("Element.getClientRects()")}}</dt>
+ <dd>Returns a collection of rectangles that indicate the bounding rectangles for each line of text in a client.</dd>
+ <dt>{{DOMxRef("Element.getElementsByClassName()")}}</dt>
+ <dd>Returns a live {{DOMxRef("HTMLCollection")}} that contains all descendants of the current element that possess the list of classes given in the parameter.</dd>
+ <dt>{{DOMxRef("Element.getElementsByTagName()")}}</dt>
+ <dd>Returns a live {{DOMxRef("HTMLCollection")}} containing all descendant elements, of a particular tag name, from the current element.</dd>
+ <dt>{{DOMxRef("Element.getElementsByTagNameNS()")}}</dt>
+ <dd>Returns a live {{DOMxRef("HTMLCollection")}} containing all descendant elements, of a particular tag name and namespace, from the current element.</dd>
+ <dt>{{DOMxRef("Element.hasAttribute()")}}</dt>
+ <dd>Returns a {{jsxref("Boolean")}} indicating if the element has the specified attribute or not.</dd>
+ <dt>{{DOMxRef("Element.hasAttributeNS()")}}</dt>
+ <dd>Returns a {{jsxref("Boolean")}} indicating if the element has the specified attribute, in the specified namespace, or not.</dd>
+ <dt>{{DOMxRef("Element.hasAttributes()")}}</dt>
+ <dd>Returns a {{jsxref("Boolean")}} indicating if the element has one or more HTML attributes present.</dd>
+ <dt>{{DOMxRef("Element.hasPointerCapture()")}}</dt>
+ <dd>Indicates whether the element on which it is invoked has pointer capture for the pointer identified by the given pointer ID.</dd>
+ <dt>{{DOMxRef("Element.insertAdjacentElement()")}}</dt>
+ <dd>Inserts a given element node at a given position relative to the element it is invoked upon.</dd>
+ <dt>{{DOMxRef("Element.insertAdjacentHTML()")}}</dt>
+ <dd>Parses the text as HTML or XML and inserts the resulting nodes into the tree in the position given.</dd>
+ <dt>{{DOMxRef("Element.insertAdjacentText()")}}</dt>
+ <dd>Inserts a given text node at a given position relative to the element it is invoked upon.</dd>
+ <dt>{{DOMxRef("Element.matches()")}} {{Experimental_Inline}}</dt>
+ <dd>Returns a {{jsxref("Boolean")}} indicating whether or not the element would be selected by the specified selector string.</dd>
+ <dt>{{DOMxRef("Element.querySelector()")}}</dt>
+ <dd>Returns the first {{DOMxRef("Node")}} which matches the specified selector string relative to the element.</dd>
+ <dt>{{DOMxRef("Element.querySelectorAll()")}}</dt>
+ <dd>Returns a {{DOMxRef("NodeList")}} of nodes which match the specified selector string relative to the element.</dd>
+ <dt>{{DOMxRef("Element.releasePointerCapture()")}}</dt>
+ <dd>Releases (stops) pointer capture that was previously set for a specific {{DOMxRef("PointerEvent","pointer event")}}.</dd>
+ <dt>{{DOMxRef("ChildNode.remove()")}} {{Experimental_Inline}}</dt>
+ <dd>Removes the element from the children list of its parent.</dd>
+ <dt>{{DOMxRef("Element.removeAttribute()")}}</dt>
+ <dd>Removes the named attribute from the current node.</dd>
+ <dt>{{DOMxRef("Element.removeAttributeNS()")}}</dt>
+ <dd>Removes the attribute with the specified name and namespace, from the current node.</dd>
+ <dt>{{DOMxRef("Element.removeAttributeNode()")}} {{Obsolete_Inline}}</dt>
+ <dd>Removes the node representation of the named attribute from the current node.</dd>
+ <dt>{{DOMxRef("EventTarget.removeEventListener()")}}</dt>
+ <dd>Removes an event listener from the element.</dd>
+ <dt>{{DOMxRef("Element.requestFullscreen()")}} {{Experimental_Inline}}</dt>
+ <dd>Asynchronously asks the browser to make the element full-screen.</dd>
+ <dt>{{DOMxRef("Element.requestPointerLock()")}} {{Experimental_Inline}}</dt>
+ <dd>Allows to asynchronously ask for the pointer to be locked on the given element.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Element.scroll()")}}</dt>
+ <dd>Scrolls to a particular set of coordinates inside a given element.</dd>
+ <dt>{{domxref("Element.scrollBy()")}}</dt>
+ <dd>Scrolls an element by the given amount.</dd>
+ <dt>{{DOMxRef("Element.scrollIntoView()")}} {{Experimental_Inline}}</dt>
+ <dd>Scrolls the page until the element gets into the view.</dd>
+ <dt>{{domxref("Element.scrollTo()")}}</dt>
+ <dd>Scrolls to a particular set of coordinates inside a given element.</dd>
+ <dt>{{DOMxRef("Element.setAttribute()")}}</dt>
+ <dd>Sets the value of a named attribute of the current node.</dd>
+ <dt>{{DOMxRef("Element.setAttributeNS()")}}</dt>
+ <dd>Sets the value of the attribute with the specified name and namespace, from the current node.</dd>
+ <dt>{{DOMxRef("Element.setAttributeNode()")}} {{Obsolete_Inline}}</dt>
+ <dd>Sets the node representation of the named attribute from the current node.</dd>
+ <dt>{{DOMxRef("Element.setAttributeNodeNS()")}} {{Obsolete_Inline}}</dt>
+ <dd>Sets the node representation of the attribute with the specified name and namespace, from the current node.</dd>
+ <dt>{{DOMxRef("Element.setCapture()")}} {{Non-standard_Inline}}</dt>
+ <dd>Sets up mouse event capture, redirecting all mouse events to this element.</dd>
+ <dt>{{DOMxRef("Element.setPointerCapture()")}}</dt>
+ <dd>Designates a specific element as the capture target of future <a href="/en-US/docs/Web/API/Pointer_events">pointer events</a>.</dd>
+ <dt>{{DOMxRef("Element.toggleAttribute()")}}</dt>
+ <dd>Toggles a boolean attribute, removing it if it is present and adding it if it is not present, on the specified element.</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("Web Animations", '', '')}}</td>
+   <td>{{Spec2("Web Animations")}}</td>
+   <td>Added the <code>getAnimations()</code> method.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Undo Manager', '', 'Element')}}</td>
+   <td>{{Spec2('Undo Manager')}}</td>
+   <td>Added the <code>undoScope</code> and <code>undoManager</code> properties.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Events 2', '#extensions-to-the-element-interface', 'Element')}}</td>
+   <td>{{Spec2('Pointer Events 2')}}</td>
+   <td>Added the following event handlers: <code>ongotpointercapture</code> and <code>onlostpointercapture</code>.<br>
+    Added the following methods: <code>setPointerCapture()</code> and <code>releasePointerCapture()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Events', '#extensions-to-the-element-interface', 'Element')}}</td>
+   <td>{{Spec2('Pointer Events')}}</td>
+   <td>Added the following event handlers: <code>ongotpointercapture</code> and <code>onlostpointercapture</code>.<br>
+    Added the following methods: <code>setPointerCapture()</code> and <code>releasePointerCapture()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Selectors API Level 1', '#interface-definitions', 'Element')}}</td>
+   <td>{{Spec2('Selectors API Level 1')}}</td>
+   <td>Added the following methods: <code>querySelector()</code> and <code>querySelectorAll()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Lock', 'index.html#element-interface', 'Element')}}</td>
+   <td>{{Spec2('Pointer Lock')}}</td>
+   <td>Added the <code>requestPointerLock()</code> method.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fullscreen', '#api', 'Element')}}</td>
+   <td>{{Spec2('Fullscreen')}}</td>
+   <td>Added the <code>requestFullscreen()</code> method.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM Parsing', '#extensions-to-the-element-interface', 'Element')}}</td>
+   <td>{{Spec2('DOM Parsing')}}</td>
+   <td>Added the following properties: <code>innerHTML</code>, and <code>outerHTML</code>.<br>
+    Added the following method: <code>insertAdjacentHTML()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#extensions-to-the-element-interface', 'Element')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>Added the following properties: <code>scrollTop</code>, <code>scrollLeft</code>, <code>scrollWidth</code>, <code>scrollHeight</code>, <code>clientTop</code>, <code>clientLeft</code>, <code>clientWidth</code>, and <code>clientHeight</code>.<br>
+    Added the following methods: <code>getClientRects()</code>, <code>getBoundingClientRect()</code>, <code>scroll()</code>, <code>scrollBy()</code>, <code>scrollTo()</code> and <code>scrollIntoView()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Element Traversal', '#ecmascript-bindings', 'Element')}}</td>
+   <td>{{Spec2('Element Traversal')}}</td>
+   <td>Added inheritance of the {{DOMxRef("ElementTraversal")}} interface.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-element', 'Element')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Added the following methods: <code>closest()</code>, <code>insertAdjacentElement()</code> and <code>insertAdjacentText()</code>.<br>
+    Moved <code>hasAttributes()</code> from the <code>Node</code> interface to this one.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#interface-element", "Element")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td>Removed the following methods: <code>setIdAttribute()</code>, <code>setIdAttributeNS()</code>, and <code>setIdAttributeNode()</code>.<br>
+    Modified the return value of <code>getElementsByTagName()</code> and <code>getElementsByTagNameNS()</code>.<br>
+    Removed the <code>schemaTypeInfo</code> property.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-745549614', 'Element')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Added the following methods: <code>setIdAttribute()</code>, <code>setIdAttributeNS()</code>, and <code>setIdAttributeNode()</code>. These methods were never implemented and have been removed in later specifications.<br>
+    Added the <code>schemaTypeInfo</code> property. This property was never implemented and has been removed in later specifications.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-745549614', 'Element')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>The <code>normalize()</code> method has been moved to {{DOMxRef("Node")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-745549614', 'Element')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Element")}}</p>
diff --git a/files/fa/web/api/gamepadevent/index.html b/files/fa/web/api/gamepadevent/index.html
new file mode 100644
index 0000000000..292215959f
--- /dev/null
+++ b/files/fa/web/api/gamepadevent/index.html
@@ -0,0 +1,64 @@
+---
+title: GamepadEvent
+slug: Web/API/GamepadEvent
+translation_of: Web/API/GamepadEvent
+---
+<pre class="syntaxbox notranslate">{{APIRef("Gamepad API")}}</pre>
+
+<p>The GamepadEvent interface of the Gamepad API contains references to gamepads connected to the system, which is what the gamepad events {{domxref("Window.gamepadconnected")}} and {{domxref("Window.gamepaddisconnected")}} are fired in response to.</p>
+
+<h2 id="Constructor">Constructor</h2>
+
+<dl>
+ <dt>{{domxref("GamepadEvent.GamepadEvent","GamepadEvent()")}}</dt>
+ <dd>Returns a new <code>GamepadEvent</code> object.</dd>
+</dl>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt>{{ domxref("GamepadEvent.gamepad") }} {{readonlyInline}}</dt>
+ <dd>Returns a {{ domxref("Gamepad") }} object, providing access to the associated gamepad data for the event fired.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>The gamepad property being called on a fired {{domxref("Window.gamepadconnected")}} event.</p>
+
+<pre class="brush: js notranslate">window.addEventListener("gamepadconnected", function(e) {
+  console.log("Gamepad connected at index %d: %s. %d buttons, %d axes.",
+  e.gamepad.index, e.gamepad.id,
+  e.gamepad.buttons.length, e.gamepad.axes.length);
+});</pre>
+
+<p>And on a {{domxref("Window.gamepaddisconnected")}} event.</p>
+
+<pre class="brush: js notranslate">window.addEventListener("gamepaddisconnected", function(e) {
+  console.log("Gamepad disconnected from index %d: %s",
+  e.gamepad.index, e.gamepad.id);
+});</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("Gamepad", "#gamepadevent-interface", "GamepadEvent")}}</td>
+   <td>{{Spec2("Gamepad")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("api.GamepadEvent")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<p><a href="/en-US/docs/Web/Guide/API/Gamepad">Using the Gamepad API</a></p>
diff --git a/files/fa/web/api/index.html b/files/fa/web/api/index.html
new file mode 100644
index 0000000000..1feb708b20
--- /dev/null
+++ b/files/fa/web/api/index.html
@@ -0,0 +1,13 @@
+---
+title: Web APIs
+slug: Web/API
+tags:
+  - API
+  - JavaScript
+  - Reference
+  - Web
+translation_of: Web/API
+---
+<p dir="rtl">در هنگام نوشتن کد برای برنامه های تحت وب به وسیله جاواسکریپت API های بسیار زیادی وجود دارند. در زیر لیستی از تمام رابط ها که شما ممکن است در هنگام توسعه برنامه های وب ویا سایت های خودتان بخواهید از آنها استفاده کنید موجود است.</p>
+
+<div>{{APIListAlpha}} </div>
diff --git a/files/fa/web/api/mediatrackconstraints/index.html b/files/fa/web/api/mediatrackconstraints/index.html
new file mode 100644
index 0000000000..11f3c9e37f
--- /dev/null
+++ b/files/fa/web/api/mediatrackconstraints/index.html
@@ -0,0 +1,264 @@
+---
+title: MediaTrackConstraints
+slug: Web/API/MediaTrackConstraints
+translation_of: Web/API/MediaTrackConstraints
+---
+<div><font><font>{{APIRef ("ضبط رسانه و جریان")}}</font></font></div>
+
+<p><strong><code>MediaTrackConstraints</code></strong><font><font>فرهنگ لغت استفاده می شود برای توصیف مجموعه ای از قابلیت ها و ارزش یا ارزش هر یک می تواند در را. </font><font>یک فرهنگ لغت محدودیتی به {{domxref ("MediaStreamTrack.applyConstraints"، "applyConstraints ()")}}}} منتقل می شود تا یک اسکریپت بتواند مجموعه ای از مقادیر یا محدوده دقیق (موردنیاز) یا مقادیر یا محدوده های مورد نظر برای مسیر و مجموعه اخیر محدودیت های سفارشی درخواست شده توسط {{domxref ("MediaStreamTrack.getConstraints"، "getConstraints ()")}}} بازیابی می شود.</font></font></p>
+
+<p><font><font>برای هر محدودیت، می توانید به طور معمول مقدار دقیق مورد نیاز خود را، ارزش ایده آل که می خواهید، محدوده ای از مقادیر قابل قبول و / یا یک مقدار که می خواهید تا حد ممکن نزدیک باشد، مشخص کنید. </font><font>خصوصیات بسته به نوع ملک محدود می شود.</font></font></p>
+
+<p>To learn more about how constraints work, see <a href="/en-US/docs/Web/API/Media_Streams_API/Constraints">Capabilities, constraints, and settings</a>.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p>Some combination—but not necessarily all—of the following properties will exist on the object.</p>
+
+<h3 id="Properties_of_all_media_tracks">Properties of all media tracks</h3>
+
+<dl>
+ <dt>{{domxref("MediaTrackConstraints.deviceId", "deviceId")}}</dt>
+ <dd>A {{domxref("ConstrainDOMString")}} object specifying a device ID or an array of device IDs which are acceptable and/or required.</dd>
+ <dt>{{domxref("MediaTrackConstraints.groupId", "groupId")}}</dt>
+ <dd>A {{domxref("ConstrainDOMString")}} object specifying a group ID or an array of group IDs which are acceptable and/or required.</dd>
+</dl>
+
+<h3 id="Properties_of_audio_tracks">Properties of audio tracks</h3>
+
+<dl>
+ <dt>{{domxref("MediaTrackConstraints.autoGainControl", "autoGainControl")}}</dt>
+ <dd>A {{domxref("ConstrainBoolean")}} object which specifies whether automatic gain control is preferred and/or required.</dd>
+ <dt>{{domxref("MediaTrackConstraints.channelCount", "channelCount")}}</dt>
+ <dd>A {{domxref("ConstrainLong")}} specifying the channel count or range of channel counts which are acceptable and/or required.</dd>
+ <dt>{{domxref("MediaTrackConstraints.echoCancellation", "echoCancellation")}}</dt>
+ <dd>A {{domxref("ConstrainBoolean")}} object specifying whether or not echo cancellation is preferred and/or required.</dd>
+ <dt>{{domxref("MediaTrackConstraints.latency", "latency")}}</dt>
+ <dd>A {{domxref("ConstrainDouble")}} specifying the latency or range of latencies which are acceptable and/or required.</dd>
+ <dt>{{domxref("MediaTrackConstraints.noiseSuppression", "noiseSuppression")}}</dt>
+ <dd>A {{domxref("ConstrainBoolean")}} which specifies whether noise suppression is preferred and/or required.</dd>
+ <dt>{{domxref("MediaTrackConstraints.sampleRate", "sampleRate")}}</dt>
+ <dd>A {{domxref("ConstrainLong")}} specifying the sample rate or range of sample rates which are acceptable and/or required.</dd>
+ <dt>{{domxref("MediaTrackConstraints.sampleSize", "sampleSize")}}</dt>
+ <dd>A {{domxref("ConstrainLong")}} specifying the sample size or range of sample sizes which are acceptable and/or required.</dd>
+ <dt>{{domxref("MediaTrackConstraints.volume", "volume")}}</dt>
+ <dd>A {{domxref("ConstrainDouble")}} specifying the volume or range of volumes which are acceptable and/or required.</dd>
+</dl>
+
+<h3 id="Properties_of_image_tracks">Properties of image tracks</h3>
+
+<dl>
+ <dt>{{domxref("MediaTrackConstraints.whiteBalanceMode","whiteBalanceMode")}}</dt>
+ <dd>A {{jsxref("String")}} specifying one of <code>"none"</code>, <code>"manual"</code>, <code>"sigle-shot"</code>, or <code>"continuous"</code>.</dd>
+ <dt>{{domxref("MediaTrackConstraints.exposureMode","exposureMode")}}</dt>
+ <dd>A {{jsxref("String")}} specifying one of <code>"none"</code>, <code>"manual"</code>, <code>"sigle-shot"</code>, or <code>"continuous"</code>.</dd>
+ <dt>{{domxref("MediaTrackConstraints.focusMode","focusMode")}}</dt>
+ <dd>A {{jsxref("String")}} specifying one of <code>"none"</code>, <code>"manual"</code>, <code>"sigle-shot"</code>, or <code>"continuous"</code>.</dd>
+ <dt>{{domxref("MediaTrackConstraints.pointsOfInterest","pointsOfInterest")}}</dt>
+ <dd>The pixel coordinates on the sensor of one or more points of interest. This is either an object in the form { x:<em>value</em>, y:<em>value</em> } or an array of such objects, where <em>value </em> is a double-precision integer.</dd>
+ <dt>{{domxref("MediaTrackConstraints.expsureCompensation","exposureCompensation")}}</dt>
+ <dd>A {{domxref("ConstrainDouble")}} (a double-precision integer) specifying f-stop adjustment by up to ±3. </dd>
+ <dt>{{domxref("MediaTrackConstraints.colorTemperature","colorTemperature")}}</dt>
+ <dd>A {{domxref("ConstrainDouble")}} (a double-precision integer) specifying a desired color temperature in degrees kelvin.</dd>
+ <dt>{{domxref("MediaTrackConstraints.iso","iso")}}</dt>
+ <dd>A {{domxref("ConstrainDouble")}} (a double-precision integer) specifying a desired iso setting.</dd>
+ <dt>{{domxref("MediaTrackConstraints.brightness","brightness")}}</dt>
+ <dd>A {{domxref("ConstrainDouble")}} (a double-precision integer) specifying a desired brightness setting.</dd>
+ <dt>{{domxref("MediaTrackConstraints.contrast","contrast")}}</dt>
+ <dd>A {{domxref("ConstrainDouble")}} (a double-precision integer) specifying the degree of difference between light and dark.</dd>
+ <dt>{{domxref("MediaTrackConstraints.saturation","saturation")}}</dt>
+ <dd>A {{domxref("ConstrainDouble")}} (a double-precision integer) specifying the degree of color intensity.</dd>
+ <dt>{{domxref("MediaTrackConstraints.sharpness","sharpness")}}</dt>
+ <dd>A {{domxref("ConstrainDouble")}} (a double-precision integer) specifying the intensity of edges.</dd>
+ <dt>{{domxref("MediaTrackConstraints.focusDistance","focusDistance")}}</dt>
+ <dd>A {{domxref("ConstrainDouble")}} (a double-precision integer) specifying distance to a focused object.</dd>
+ <dt>{{domxref("MediaTrackConstraints.zoom","zoom")}}</dt>
+ <dd>A {{domxref("ConstrainDouble")}} (a double-precision integer) specifying the desired focal length.</dd>
+ <dt>{{domxref("MediaTrackConstraints.torch","torch")}}</dt>
+ <dd>A {{jsxref("Boolean")}} whter the fill light continuously connected, meaning it stays on as long as the track is active.</dd>
+</dl>
+
+<h3 id="Properties_of_video_tracks">Properties of video tracks</h3>
+
+<dl>
+ <dt>{{domxref("MediaTrackConstraints.aspectRatio", "aspectRatio")}}</dt>
+ <dd>A {{domxref("ConstrainDouble")}} specifying the video aspect ratio or range of aspect ratios which are acceptable and/or required.</dd>
+ <dt>{{domxref("MediaTrackConstraints.facingMode", "facingMode")}}</dt>
+ <dd>A {{domxref("ConstrainDOMString")}} object specifying a facing or an array of facings which are acceptable and/or required.</dd>
+ <dt>{{domxref("MediaTrackConstraints.frameRate", "frameRate")}}</dt>
+ <dd><font><font>A {{domxref ("ConstrainDouble")}} تعیین نرخ فریم یا دامنه نرخ فریم که قابل قبول و / یا مورد نیاز است.</font></font></dd>
+ <dt><font><font>{{domxref ("MediaTrackConstraints.height"، "height")}}</font></font></dt>
+ <dd><font><font>A {{domxref ("ConstrainLong")}} تعیین ارتفاع ویدیو یا محدوده ارتفاع که قابل قبول و / یا مورد نیاز است.</font></font></dd>
+ <dt><font><font>{{domxref ("MediaTrackConstraints.width"، "width")}}</font></font></dt>
+ <dd><font><font>A {{domxref ("ConstrainLong")}} مشخص کردن عرض ویدئو یا طیف وسیعی از عرض که قابل قبول و / یا مورد نیاز است.</font></font></dd>
+</dl>
+
+<h2 id="مشخصات_فنی"><font><font>مشخصات فنی</font></font></h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col"><font><font>مشخصات</font></font></th>
+   <th scope="col"><font><font>وضعیت</font></font></th>
+   <th scope="col"><font><font>اظهار نظر</font></font></th>
+  </tr>
+  <tr>
+   <td><font><font>{{SpecName ('Media Capture'، '# dom-mediatrackconstraints'، 'applyConstraints ()')}}</font></font></td>
+   <td><font><font>{{Spec2 ('رسانه ضبط')}}</font></font></td>
+   <td><font><font>تعریف اولیه</font></font></td>
+  </tr>
+  <tr>
+   <td><font><font>{{SpecName ('MediaStream تصویر'، '# mediatrackconstraintset-section'، 'applyConstraints ()')}}</font></font></td>
+   <td><font><font>{{Spec2 ('MediaStream Image')}}</font></font></td>
+   <td><font><font>محدودیت های تصویر را اضافه می کند.</font></font></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="سازگاری_مرورگر"><font><font>سازگاری مرورگر</font></font></h2>
+
+<p><font><font>{{CompatibilityTable}}</font></font></p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th><font><font>ویژگی</font></font></th>
+   <th><font><font>کروم</font></font></th>
+   <th><font><font>فایرفاکس (Gecko)</font></font></th>
+   <th><font><font>اینترنت اکسپلورر</font></font></th>
+   <th><font><font>اپرا</font></font></th>
+   <th><font><font>سافاری</font></font></th>
+  </tr>
+  <tr>
+   <td><font><font>پشتیبانی پایه</font></font></td>
+   <td><font><font>{{CompatChrome (59)}}</font></font></td>
+   <td><font><font>{{CompatUnknown}}</font></font></td>
+   <td><font><font>{{CompatUnknown}}</font></font></td>
+   <td><font><font>{{CompatOpera (46)}}</font></font></td>
+   <td><font><font>{{CompatUnknown}}</font></font></td>
+  </tr>
+  <tr>
+   <td><code>deviceId</code></td>
+   <td><font><font>{{CompatChrome (59)}}</font></font></td>
+   <td><font><font>{{CompatUnknown}}</font></font></td>
+   <td><font><font>{{CompatUnknown}}</font></font></td>
+   <td><font><font>{{CompatOpera (46)}}</font></font></td>
+   <td><font><font>{{CompatUnknown}}</font></font></td>
+  </tr>
+  <tr>
+   <td><code>groupId</code></td>
+   <td><font><font>{{CompatChrome (59)}}</font></font></td>
+   <td><font><font>{{CompatUnknown}}</font></font></td>
+   <td><font><font>{{CompatUnknown}}</font></font></td>
+   <td><font><font>{{CompatOpera (46)}}</font></font></td>
+   <td><font><font>{{CompatUnknown}}</font></font></td>
+  </tr>
+  <tr>
+   <td><font><font>خواص آهنگ صوتی</font></font></td>
+   <td><font><font>{{CompatNo}}</font></font></td>
+   <td><font><font>{{CompatUnknown}}</font></font></td>
+   <td><font><font>{{CompatUnknown}}</font></font></td>
+   <td><font><font>{{CompatNo}}</font></font></td>
+   <td><font><font>{{CompatUnknown}}</font></font></td>
+  </tr>
+  <tr>
+   <td><font><font>خواص مسیر تصویر</font></font></td>
+   <td><font><font>{{CompatChrome (63)}}</font></font></td>
+   <td><font><font>{{CompatUnknown}}</font></font></td>
+   <td><font><font>{{CompatUnknown}}</font></font></td>
+   <td><font><font>{{CompatOpera (50)}}</font></font></td>
+   <td><font><font>{{CompatUnknown}}</font></font></td>
+  </tr>
+  <tr>
+   <td><font><font>خواص آهنگ های ویدئویی</font></font></td>
+   <td><font><font>{{CompatChrome (59)}}</font></font></td>
+   <td><font><font>{{CompatUnknown}}</font></font></td>
+   <td><font><font>{{CompatUnknown}}</font></font></td>
+   <td><font><font>{{CompatOpera (46)}}</font></font></td>
+   <td><font><font>{{CompatUnknown}}</font></font></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th><font><font>ویژگی</font></font></th>
+   <th><font><font>Android Webview</font></font></th>
+   <th><font><font>Chrome برای آندروید</font></font></th>
+   <th><font><font>فایرفاکس موبایل (Gecko)</font></font></th>
+   <th><font><font>اینترنت اکسپلورر</font></font></th>
+   <th><font><font>اپرا موبایل</font></font></th>
+   <th><font><font>سافاری موبایل</font></font></th>
+  </tr>
+  <tr>
+   <td><font><font>پشتیبانی پایه</font></font></td>
+   <td><font><font>{{CompatChrome (59)}}</font></font></td>
+   <td><font><font>{{CompatChrome (59)}}</font></font></td>
+   <td><font><font>{{CompatUnknown}}</font></font></td>
+   <td><font><font>{{CompatUnknown}}</font></font></td>
+   <td><font><font>{{CompatOperaMobile (46)}}</font></font></td>
+   <td><font><font>{{CompatUnknown}}</font></font></td>
+  </tr>
+  <tr>
+   <td><code>deviceId</code></td>
+   <td><font><font>{{CompatChrome (59)}}</font></font></td>
+   <td><font><font>{{CompatChrome (59)}}</font></font></td>
+   <td><font><font>{{CompatUnknown}}</font></font></td>
+   <td><font><font>{{CompatUnknown}}</font></font></td>
+   <td><font><font>{{CompatOperaMobile (46)}}</font></font></td>
+   <td><font><font>{{CompatUnknown}}</font></font></td>
+  </tr>
+  <tr>
+   <td><code>groupId</code></td>
+   <td><font><font>{{CompatChrome (59)}}</font></font></td>
+   <td><font><font>{{CompatChrome (59)}}</font></font></td>
+   <td><font><font>{{CompatUnknown}}</font></font></td>
+   <td><font><font>{{CompatUnknown}}</font></font></td>
+   <td><font><font>{{CompatOperaMobile (46)}}</font></font></td>
+   <td><font><font>{{CompatUnknown}}</font></font></td>
+  </tr>
+  <tr>
+   <td><font><font>خواص آهنگ صوتی</font></font></td>
+   <td><font><font>{{CompatNo}}</font></font></td>
+   <td><font><font>{{CompatNo}}</font></font></td>
+   <td><font><font>{{CompatUnknown}}</font></font></td>
+   <td><font><font>{{CompatUnknown}}</font></font></td>
+   <td><font><font>{{CompatNo}}</font></font></td>
+   <td><font><font>{{CompatUnknown}}</font></font></td>
+  </tr>
+  <tr>
+   <td><font><font>خواص مسیر تصویر</font></font></td>
+   <td><font><font>{{CompatChrome (63)}}</font></font></td>
+   <td><font><font>{{CompatChrome (63)}}</font></font></td>
+   <td><font><font>{{CompatUnknown}}</font></font></td>
+   <td><font><font>{{CompatUnknown}}</font></font></td>
+   <td><font><font>{{CompatOperaMobile (50)}}</font></font></td>
+   <td><font><font>{{CompatUnknown}}</font></font></td>
+  </tr>
+  <tr>
+   <td><font><font>خواص آهنگ های ویدئویی</font></font></td>
+   <td><font><font>{{CompatChrome (59)}}</font></font></td>
+   <td><font><font>{{CompatChrome (59)}}</font></font></td>
+   <td><font><font>{{CompatUnknown}}</font></font></td>
+   <td><font><font>{{CompatUnknown}}</font></font></td>
+   <td><font><font>{{CompatOperaMobile (46)}}</font></font></td>
+   <td><font><font>{{CompatUnknown}}</font></font></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="همچنین_نگاه_کنید"><font><font>همچنین نگاه کنید</font></font></h2>
+
+<ul>
+ <li><font><font>{{domxref ("MediaDevices.getUserMedia ()")}}</font></font></li>
+ <li><font><font>{{domxref ("MediaStreamTrack.getConstraints ()")}}</font></font></li>
+ <li><font><font>{{domxref ("MediaStreamTrack.applyConstraints ()")}}</font></font></li>
+ <li><font><font>{{domxref ("MediaDevices.getSupportedConstraints ()")}}</font></font></li>
+ <li><font><font>{{domxref ("MediaTrackSupportedConstraints")}}</font></font></li>
+ <li><font><font>{{domxref ("MediaStreamTrack.getSettings ()")}}</font></font></li>
+</ul>
diff --git a/files/fa/web/api/node/index.html b/files/fa/web/api/node/index.html
new file mode 100644
index 0000000000..0d23b9445d
--- /dev/null
+++ b/files/fa/web/api/node/index.html
@@ -0,0 +1,373 @@
+---
+title: Node
+slug: Web/API/Node
+tags:
+  - API
+  - DOM
+  - DOM Reference
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - WebAPI
+translation_of: Web/API/Node
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>A <strong><code>Node</code></strong> is an interface from which a number of DOM types inherit, and allows these various types to be treated (or tested) similarly.</p>
+
+<p>The following interfaces all inherit from <code>Node</code> its methods and properties: {{domxref("Document")}}, {{domxref("Element")}}, {{domxref("CharacterData")}} (which {{domxref("Text")}}, {{domxref("Comment")}}, and {{domxref("CDATASection")}} inherit), {{domxref("ProcessingInstruction")}}, {{domxref("DocumentFragment")}}, {{domxref("DocumentType")}}, {{domxref("Notation")}}, {{domxref("Entity")}}, {{domxref("EntityReference")}}</p>
+
+<p>These interfaces may return null in particular cases where the methods and properties are not relevant. They may throw an exception - for example when adding children to a node type for which no children can exist.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>Inherits properties from its parents {{domxref("EventTarget")}}</em>.<sup>[1]</sup></p>
+
+<dl>
+ <dt>{{domxref("Node.baseURI")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("DOMString")}} representing the base URL. The concept of base URL changes from one language to another; in HTML, it corresponds to the protocol, the domain name and the directory structure, that is all until the last <code>'/'</code>.</dd>
+ <dt>{{domxref("Node.baseURIObject")}} {{Non-standard_inline()}} {{ Fx_minversion_inline("3") }}</dt>
+ <dd>(Not available to web content.) The read-only {{ Interface("nsIURI") }} object representing the base URI for the element.</dd>
+ <dt>{{domxref("Node.childNodes")}} {{readonlyInline}}</dt>
+ <dd>Returns a live {{domxref("NodeList")}} containing all the children of this node. {{domxref("NodeList")}} being live means that if the children of the <code>Node</code> change, the {{domxref("NodeList")}} object is automatically updated.</dd>
+ <dt>{{domxref("Node.firstChild")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("Node")}} representing the first direct child node of the node, or <code>null</code> if the node has no child.</dd>
+ <dt>{{domxref("Node.lastChild")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("Node")}} representing the last direct child node of the node, or <code>null</code> if the node has no child.</dd>
+ <dt>{{domxref("Node.localName")}} {{obsolete_inline}}{{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("DOMString")}} representing the local part of the qualified name of an element. In Firefox 3.5 and earlier, the property upper-cases the local name for HTML elements (but not XHTML elements). In later versions, this does not happen, so the property is in lower case for both HTML and XHTML. {{ gecko_minversion_inline("1.9.2") }}<br>
+ Though recent specifications require <code>localName</code> to be defined on the {{domxref("Element")}} interface, Gecko-based browsers still implement it on the {{domxref("Node")}} interface.</dd>
+ <dt>{{domxref("Node.namespaceURI")}} {{obsolete_inline}}{{readonlyInline}}</dt>
+ <dd>The namespace URI of this node, or <code>null</code> if it is no namespace. In Firefox 3.5 and earlier, HTML elements are in no namespace. In later versions, HTML elements are in the <code><a class="linkification-ext external" href="http://www.w3.org/1999/xhtml" title="Linkification: http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a></code> namespace in both HTML and XML trees. {{ gecko_minversion_inline("1.9.2") }}<br>
+ Though recent specifications require <code>namespaceURI</code> to be defined on the {{domxref("Element")}} interface, Gecko-based browsers still implement it on the {{domxref("Node")}} interface.</dd>
+ <dt>{{domxref("Node.nextSibling")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("Node")}} representing the next node in the tree, or <code>null</code> if there isn't such node.</dd>
+ <dt>{{domxref("Node.nodeName")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("DOMString")}} containing the name of the <code>Node</code>. The structure of the name will differ with the name type. E.g. An {{domxref("HTMLElement")}} will contain the name of the corresponding tag, like <code>'audio'</code> for an {{domxref("HTMLAudioElement")}}, a {{domxref("Text")}} node will have the <code>'#text'</code> string, or a {{domxref("Document")}} node will have the <code>'#document'</code> string.</dd>
+ <dt>{{domxref("Node.nodePrincipal")}} {{Non-standard_inline()}}{{ Fx_minversion_inline("3") }}</dt>
+ <dd>A {{ Interface("nsIPrincipal") }} representing the node principal.</dd>
+ <dt>{{domxref("Node.nodeType")}}{{readonlyInline}}</dt>
+ <dd>Returns an <code>unsigned short</code> representing the type of the node. Possible values are:
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <th scope="col">Name</th>
+    <th scope="col">Value</th>
+   </tr>
+   <tr>
+    <td><code>ELEMENT_NODE</code></td>
+    <td><code>1</code></td>
+   </tr>
+   <tr>
+    <td><code>ATTRIBUTE_NODE</code> {{deprecated_inline()}}</td>
+    <td><code>2</code></td>
+   </tr>
+   <tr>
+    <td><code>TEXT_NODE</code></td>
+    <td><code>3</code></td>
+   </tr>
+   <tr>
+    <td><code>CDATA_SECTION_NODE</code> {{deprecated_inline()}}</td>
+    <td><code>4</code></td>
+   </tr>
+   <tr>
+    <td><code>ENTITY_REFERENCE_NODE</code> {{deprecated_inline()}}</td>
+    <td><code>5</code></td>
+   </tr>
+   <tr>
+    <td><code>ENTITY_NODE</code> {{deprecated_inline()}}</td>
+    <td><code>6</code></td>
+   </tr>
+   <tr>
+    <td><code>PROCESSING_INSTRUCTION_NODE</code></td>
+    <td><code>7</code></td>
+   </tr>
+   <tr>
+    <td><code>COMMENT_NODE</code></td>
+    <td><code>8</code></td>
+   </tr>
+   <tr>
+    <td><code>DOCUMENT_NODE</code></td>
+    <td><code>9</code></td>
+   </tr>
+   <tr>
+    <td><code>DOCUMENT_TYPE_NODE</code></td>
+    <td><code>10</code></td>
+   </tr>
+   <tr>
+    <td><code>DOCUMENT_FRAGMENT_NODE</code></td>
+    <td><code>11</code></td>
+   </tr>
+   <tr>
+    <td><code>NOTATION_NODE</code> {{deprecated_inline()}}</td>
+    <td><code>12</code></td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+ <dt>{{domxref("Node.nodeValue")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} representing the value of an object. For most <code>Node</code> types, this returns <code>null</code> and any set operation is ignored. For nodes of type <code>TEXT_NODE</code> ({{domxref("Text")}} objects), <code>COMMENT_NODE</code> ({{domxref("Comment")}} objects), and <code>PROCESSING_INSTRUCTION_NODE</code> ({{domxref("ProcessingInstruction")}} objects), the value corresponds to the text data contained in the object.</dd>
+ <dt>{{domxref("Node.ownerDocument")}} {{readonlyInline}}</dt>
+ <dd>Returns the {{domxref("Document")}} that this node belongs to. If no document is associated with it, returns <code>null</code>.</dd>
+ <dt>{{domxref("Node.parentNode")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("Node")}} that is the parent of this node. If there is no such node, like if this node is the top of the tree or if doesn't participate in a tree, this property returns <code>null</code>.</dd>
+ <dt>{{domxref("Node.parentElement")}} {{readonlyInline}}</dt>
+ <dd>Returns an {{domxref("Element")}} that is the parent of this node. If the node has no parent, or if that parent is not an {{domxref("Element")}}, this property returns <code>null</code>.</dd>
+ <dt>{{domxref("Node.prefix")}} {{obsolete_inline}}{{readonlyInline}}</dt>
+ <dd>Is a {{domxref("DOMString")}} representing the namespace prefix of the node, or <code>null</code> if no prefix is specified.<br>
+ Though recent specifications require <code>prefix</code> to be defined on the {{domxref("Element")}} interface, Gecko-based browsers still implement it on the {{domxref("Node")}} interface.</dd>
+ <dt>{{domxref("Node.previousSibling")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("Node")}} representing the previous node in the tree, or <code>null</code> if there isn't such node.</dd>
+ <dt>{{domxref("Node.textContent")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} representing the textual content of an element and all its descendants.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>Inherits methods from its parents {{domxref("EventTarget")}}</em>.<sup>[1]</sup></p>
+
+<dl>
+ <dt>{{domxref("Node.appendChild()")}}</dt>
+ <dd>Insert a {{domxref("Node")}} as the last child node of this element.</dd>
+ <dt>{{domxref("Node.cloneNode()")}}</dt>
+ <dd>Clone a {{domxref("Node")}}, and optionally, all of its contents. By default, it clones the content of the node.</dd>
+ <dt>{{domxref("Node.compareDocumentPosition()")}}</dt>
+ <dd> </dd>
+ <dt>{{domxref("Node.contains()")}}</dt>
+ <dd> </dd>
+ <dt>{{domxref("Node.getFeature()")}} {{obsolete_inline}}</dt>
+ <dd>...</dd>
+ <dt>{{domxref("Node.getUserData()")}} {{obsolete_inline}}</dt>
+ <dd>Allows a user to get some {{domxref("DOMUserData")}} from the node.</dd>
+ <dt>{{domxref("Node.hasAttributes()")}} {{obsolete_inline}}</dt>
+ <dd>Returns a {{domxref("Boolean")}} indicating if the element has any attributes, or not.</dd>
+ <dt>{{domxref("Node.hasChildNodes()")}}</dt>
+ <dd>Returns a {{domxref("Boolean")}} indicating if the element has any child nodes, or not.</dd>
+ <dt>{{domxref("Node.insertBefore()")}}</dt>
+ <dd>Inserts the first {{domxref("Node")}} given in a parameter immediately before the second, child of this element, {{domxref("Node")}}.</dd>
+ <dt>{{domxref("Node.isDefaultNamespace()")}}</dt>
+ <dd> </dd>
+ <dt>{{domxref("Node.isEqualNode()")}}</dt>
+ <dd> </dd>
+ <dt>{{domxref("Node.isSameNode()")}} {{obsolete_inline}}</dt>
+ <dd> </dd>
+ <dt>{{domxref("Node.isSupported()")}} {{obsolete_inline}}</dt>
+ <dd>Returns a <a href="https://developer.mozilla.org/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a> flag containing the result of a test whether the DOM implementation implements a specific feature and this feature is supported by the specific node.</dd>
+ <dt>{{domxref("Node.lookupPrefix()")}}</dt>
+ <dd> </dd>
+ <dt>{{domxref("Node.lookupNamespaceURI()")}}</dt>
+ <dd> </dd>
+ <dt>{{domxref("Node.normalize()")}}</dt>
+ <dd>Clean up all the text nodes under this element (merge adjacent, remove empty).</dd>
+ <dt>{{domxref("Node.removeChild()")}}</dt>
+ <dd>Removes a child node from the current element, which must be a child of the current node.</dd>
+ <dt>{{domxref("Node.replaceChild()")}}</dt>
+ <dd>Replaces one child {{domxref("Node")}} of the current one with the second one given in parameter.</dd>
+ <dt>{{domxref("Node.setUserData()")}} {{obsolete_inline}}</dt>
+ <dd>Allows a user to attach, or remove, {{domxref("DOMUserData")}} to the node.</dd>
+ <dd> </dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Browse_all_child_nodes">Browse all child nodes</h3>
+
+<p>The following function recursively cycles all child nodes of a node and executes a callback function upon them (and upon the parent node itself).</p>
+
+<pre class="brush: js">function DOMComb (oParent, oCallback) {
+  if (oParent.hasChildNodes()) {
+    for (var oNode = oParent.firstChild; oNode; oNode = oNode.nextSibling) {
+      DOMComb(oNode, oCallback);
+    }
+  }
+  oCallback.call(oParent);
+}</pre>
+
+<h4 id="Syntax">Syntax</h4>
+
+<pre>DOMComb(parentNode, callbackFunction);</pre>
+
+<h4 id="Description">Description</h4>
+
+<p>Recursively cycle all child nodes of <code>parentNode</code> and <code>parentNode</code> itself and execute the <code>callbackFunction</code> upon them as <a href="/en-US/docs/JavaScript/Reference/Operators/this" title="en-US/docs/JavaScript/Reference/Operators/this"><code>this</code></a> objects.</p>
+
+<h4 id="Parameters">Parameters</h4>
+
+<dl>
+ <dt><code>parentNode</code></dt>
+ <dd>The parent node (<code><strong>Node</strong> <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object" title="en-US/docs/JavaScript/Reference/Global_Objects/Object">Object</a></code>).</dd>
+ <dt><code>callbackFunction</code></dt>
+ <dd>The callback function (<a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function" title="en-US/docs/JavaScript/Reference/Global_Objects/Function"><code>Function</code></a>).</dd>
+</dl>
+
+<h4 id="Sample_usage">Sample usage</h4>
+
+<p>The following example send to the <code>console.log</code> the text content of the body:</p>
+
+<pre class="brush: js">function printContent () {
+  if (this.nodeValue) { console.log(this.nodeValue); }
+}
+
+onload = function () {
+  DOMComb(document.body, printContent);
+};</pre>
+
+<h3 id="Remove_all_children_nested_within_a_node">Remove all children nested within a node</h3>
+
+<pre class="brush: js">Element.prototype.removeAll = function () {
+  while (this.firstChild) { this.removeChild(this.firstChild); }
+  return this;
+};</pre>
+
+<h4 id="Sample_usage_2">Sample usage</h4>
+
+<pre class="brush: js">/* ... an alternative to document.body.innerHTML = "" ... */
+document.body.removeAll();</pre>
+
+<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('DOM WHATWG', '#interface-node', 'Node')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Removed the following properties: <code>attributes</code>, <code>namespaceURI</code>, <code>prefix</code>, and <code>localName</code>.<br>
+    Removed the following methods: <code>isSupported()</code>, <code>hasAttributes()</code>, <code>isSameNode()</code>, <code>getFeature()</code>, <code>setUserData()</code>, and <code>getUserData()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-1950641247', 'Node')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>The methods <code>insertBefore()</code>, <code>replaceChild()</code>, <code>removeChild()</code>, and <code>appendChild()</code> returns one more kind of error (<code>NOT_SUPPORTED_ERR</code>) if called on a {{domxref("Document")}}.<br>
+    The <code>normalize()</code> method has been modified so that {{domxref("Text")}} node can also be normalized if the proper {{domxref("DOMConfiguration")}} flag is set.<br>
+    Added the following methods: <code>compareDocumentPosition()</code>, <code>isSameNode()</code>, <code>lookupPrefix()</code>, <code>isDefaultNamespace()</code>, <code>lookupNamespaceURI()</code>, <code>isEqualNode()</code>, <code>getFeature()</code>, <code>setUserData()</code>, and <code>getUserData().</code><br>
+    Added the following properties: <code>baseURI</code> and <code>textContent</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-1950641247', 'Node')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>The <code>ownerDocument</code> property was slightly modified so that {{domxref("DocumentFragment")}} also returns <code>null</code>.<br>
+    Added the following properties: <code>namespaceURI</code>, <code>prefix</code>, and <code>localName</code>.<br>
+    Added the following methods: <code>normalize()</code>, <code>isSupported()</code> and <code>hasAttributes()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-1950641247', 'Node')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </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>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>getFeature()</code>{{obsolete_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>Supported from {{CompatGeckoDesktop("1.0")}} to {{CompatGeckoDesktop("6.0")}}.<br>
+    Removed in {{CompatGeckoDesktop("7.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>getUserData()</code>, <code>setUserData()</code> and <code>hasAttributes()</code> {{deprecated_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>Supported from {{CompatGeckoDesktop("1.0")}} to {{CompatGeckoDesktop("21.0")}}.<br>
+    Removed in {{CompatGeckoDesktop("22.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>isSameNode()</code> {{obsolete_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>Supported from {{CompatGeckoDesktop("1.0")}} to {{CompatGeckoDesktop("9.0")}}.<br>
+    Removed in {{CompatGeckoDesktop("10.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>isSupported()</code> {{obsolete_inline}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>Supported from {{CompatGeckoDesktop("1.0")}} to {{CompatGeckoDesktop("21.0")}}.<br>
+    Removed in {{CompatGeckoDesktop("22.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>attributes</code></td>
+   <td>{{CompatNo}}</td>
+   <td>Supported from {{CompatGeckoDesktop("1.0")}} to {{CompatGeckoDesktop("21.0")}}.<br>
+    Moved to {{domxref("Element")}} in {{CompatGeckoDesktop("22.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>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>getFeature()</code>{{obsolete_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>Supported from {{CompatGeckoDesktop("1.0")}} to {{CompatGeckoDesktop("6.0")}}.<br>
+    Removed in {{CompatGeckoDesktop("7.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Webkit and Blink incorrectly do not make <code>Node</code> inherit from {{domxref("EventTarget")}}.</p>
diff --git a/files/fa/web/api/node/innertext/index.html b/files/fa/web/api/node/innertext/index.html
new file mode 100644
index 0000000000..98dd0eed8f
--- /dev/null
+++ b/files/fa/web/api/node/innertext/index.html
@@ -0,0 +1,75 @@
+---
+title: Node.innerText
+slug: Web/API/Node/innerText
+translation_of: Web/API/HTMLElement/innerText
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>{{ Non-standard_header() }}</p>
+
+<h2 dir="rtl" id="گزیده">گزیده</h2>
+
+<p dir="rtl"><code><strong>Node.innerText </strong></code><span id="result_box" lang="fa">یک ویژگی غیر استاندارد است که نشان دهنده محتوای متن یک node و زیر گروه های آن است</span><span lang="fa"><span> به عنوان گیرنده متنی که کاربر می تواند با نشانگر موس از محتوا انتخاب  و آن را کپی نماید.</span></span></p>
+
+<p dir="rtl">{{domxref("Node.textContent")}} <span id="result_box" lang="fa"><span>یک جایگزین</span> <span>استاندارد</span> <span>تا حدی شبیه</span> <span>است، اگر چه</span> <span>تفاوت های مهمی بین</span> <span>این دو وجود دارد</span><span>.</span></span></p>
+
+<h2 dir="rtl" id="ویژگی_ها">ویژگی ها</h2>
+
+<p dir="rtl"><span class="short_text" id="result_box" lang="fa"><span>یک</span> <span>پیش نویس</span> <span>غیر رسمی از</span> ویژگی ها در <strong><a dir="rtl" href="https://rocallahan.github.io/innerText-spec/">اینجا</a></strong> <span>موجود است.</span></span></p>
+
+<h2 dir="rtl" id="Browser_Compatibility" name="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 (WebKit)</th>
+  </tr>
+  <tr>
+   <td>پایه پشتیبانی</td>
+   <td>4</td>
+   <td>{{ CompatGeckoDesktop(45) }}</td>
+   <td>6</td>
+   <td>9.6 (شاید پیش از این)</td>
+   <td>3</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>
+  </tr>
+  <tr>
+   <td>پایه پشتیبانی</td>
+   <td>2.3 (شاید پیش از این)</td>
+   <td>{{ CompatGeckoMobile(45) }}</td>
+   <td>10 (شاید پیش از این)</td>
+   <td>12</td>
+   <td>4.1 (شاید پیش از این)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 dir="rtl" id="موارد_مرتبط">موارد مرتبط</h2>
+
+<ul>
+ <li>{{domxref("HTMLElement.outerText")}}</li>
+ <li>{{domxref("Element.innerHTML")}}</li>
+</ul>
diff --git a/files/fa/web/api/node/insertbefore/index.html b/files/fa/web/api/node/insertbefore/index.html
new file mode 100644
index 0000000000..5e853fc373
--- /dev/null
+++ b/files/fa/web/api/node/insertbefore/index.html
@@ -0,0 +1,155 @@
+---
+title: Node.insertBefore()
+slug: Web/API/Node/insertBefore
+translation_of: Web/API/Node/insertBefore
+---
+<div>
+<div>Mojtaba iranpour {{APIRef("DOM")}}</div>
+</div>
+
+<p>The <code><strong>Node.insertBefore()</strong></code> method inserts the specified node before a reference node as a child of the current node.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var <em>insertedNode</em> = <em>parentNode</em>.insertBefore(<em>newNode</em>, <em>referenceNode</em>);
+</pre>
+
+<p>In Mozilla Firefox, if <code><var>referenceNode</var></code> is <code>null</code><span style="font-size: 14px; line-height: 1.5;">, </span><code><var>newNode</var></code><span style="font-size: 14px; line-height: 1.5;"> is inserted at the end of the list of child nodes.  If the <code><em>referenceNode </em></code>is of <em><code>[ Type ]</code> "<code><em>undefined"</em> </code></em>( this kind of argument is <code>String</code> ) will be throw, in all of the browser ( IE, Chrome and Mozilla ) a "Type Error: Invalid Argument" since the the function </span><code>insertBefore </code>accept as second argument a<em><code> [ Type ] Node.</code></em></p>
+
+<h2 id="Example_2">Example</h2>
+
+<pre class="brush: html">&lt;div id="parentElement"&gt;
+   &lt;span id="childElement"&gt;foo bar&lt;/span&gt;
+&lt;/div&gt;
+
+&lt;script&gt;
+//Create the new node to insert
+var newNode = document.createElement("span");
+
+//Get a reference to the parent node
+var parentDiv = document.getElementById("parentElement").parentNode;
+
+//Begin test case [ 1 ] : Exist a childElement --&gt; All working correctly
+var sp2 = document.getElementById("childElement");
+parentDiv.insertBefore(newNode,sp2);
+//End test case [ 1 ]
+
+//Begin test case [ 2 ] : childElement is of Type undefined
+var sp2 = undefined; //Not exist a node of id "childElement"
+parentDiv.insertBefore(newNode,sp2); //implicit dynamic cast to type Node
+//End test case [ 2 ]
+
+//Begin test case [ 3 ] : childElement is of Type "undefined" ( string )
+var sp2 = "undefined"; //Not exist a node of id "childElement"
+parentDiv.insertBefore(newNode,sp2); //Generate "Type Error: Invalid Argument"
+//End test case [ 3 ]
+</pre>
+
+<ul>
+ <li><code>insertedNode</code> The node being inserted, that is <code>newNode</code></li>
+ <li><code>parentNode</code> The parent of the newly inserted node.</li>
+ <li><code>newNode</code> The node to insert.</li>
+ <li><code>referenceNode</code> The node before which <code>newNode</code> is inserted.</li>
+</ul>
+
+<h2 id="Example" name="Example">Example</h2>
+
+<pre class="brush:html">&lt;div id="parentElement"&gt;
+  &lt;span id="childElement"&gt;foo bar&lt;/span&gt;
+&lt;/div&gt;
+
+&lt;script&gt;
+// Create a new, plain &lt;span&gt; element
+var sp1 = document.createElement("span");
+
+// Get a reference to the element, before we want to insert the element
+var sp2 = document.getElementById("childElement");
+// Get a reference to the parent element
+var parentDiv = sp2.parentNode;
+
+// Insert the new element into the DOM before sp2
+parentDiv.insertBefore(sp1, sp2);
+&lt;/script&gt;
+</pre>
+
+<p>There is no <code>insertAfter</code> method. It can be emulated by combining the <code>insertBefore</code> method with <code><a href="/en-US/docs/DOM/Node.nextSibling" title="DOM/Node.nextSibling">nextSibling</a></code>.</p>
+
+<p>In the previous example, <code>sp1</code> could be inserted after <code>sp2</code> using:</p>
+
+<pre><code>parentDiv.insertBefore(sp1, sp2.nextSibling);</code></pre>
+
+<p>If <code>sp2</code> does not have a next sibling, then it must be the last child — <code>sp2.nextSibling</code> returns <code>null</code>, and <code>sp1</code> is inserted at the end of the child node list (immediately after <code>sp2</code>).</p>
+
+<h2 id="Example2" name="Example2">Example 2</h2>
+
+<p>Insert an element before the first child element, using the <a href="/en-US/docs/DOM/Node.firstChild" title="Node.firstChild">firstChild</a> property.</p>
+
+<pre class="brush:js">// Get a reference to the element in which we want to insert a new node
+var parentElement = document.getElementById('parentElement');
+// Get a reference to the first child
+var theFirstChild = parentElement.firstChild;
+
+// Create a new element
+var newElement = document.createElement("div");
+
+// Insert the new element before the first child
+parentElement.insertBefore(newElement, theFirstChild);
+</pre>
+
+<p>When the element does not have a first child, then <code>firstChild</code> is <code>null</code>. The element is still appended to the parent, after the last child. Since the parent element did not have a first child, it did not have a last child either. Consequently, the new element is the only element, after insertion.</p>
+
+<h2 id="Browser_Compatibility" name="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 (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</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>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>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Specification" name="Specification">Specification</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-952280727">insertBefore</a></li>
+</ul>
diff --git a/files/fa/web/api/node/isequalnode/index.html b/files/fa/web/api/node/isequalnode/index.html
new file mode 100644
index 0000000000..9cc089f509
--- /dev/null
+++ b/files/fa/web/api/node/isequalnode/index.html
@@ -0,0 +1,88 @@
+---
+title: Node.isEqualNode()
+slug: Web/API/Node/isEqualNode
+translation_of: Web/API/Node/isEqualNode
+---
+<div>
+<div>{{APIRef("DOM")}}</div>
+</div>
+
+<p>The <code><strong>Node.isEqualNode()</strong></code> method tests whether two nodes are equal. Two nodes are equal when they have the same type, defining characteristics (for elements, this would be their ID, number of children, and so forth), its attributes match, and so on. The specific set of data points that must match varies depending on the types of the nodes.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var <var>isEqualNode</var> = <var>node</var>.isEqualNode(<var>otherNode</var>);
+</pre>
+
+<ul>
+ <li><code>otherNode</code>: The {{domxref("Node")}} to compare equality with.</li>
+</ul>
+
+<h2 id="Example">Example</h2>
+
+<p>In this example, we create three {{HTMLElement("div")}} blocks. The first and third have the same contents and attributes, while the second is different. Then we run some JavaScript to compare the nodes using <code>isEqualNode()</code> and output the results.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;This is the first element.&lt;/div&gt;
+&lt;div&gt;This is the second element.&lt;/div&gt;
+&lt;div&gt;This is the first element.&lt;/div&gt;
+
+&lt;p id="output"&gt;&lt;/p&gt;</pre>
+
+<div class="hidden">
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#output {
+  width: 440px;
+  border: 2px solid black;
+  border-radius: 5px;
+  padding: 10px;
+  margin-top: 20px;
+  display: block;
+}</pre>
+</div>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">let output = document.getElementById("output");
+let divList  = document.getElementsByTagName("div");
+
+output.innerHTML += "div 0 equals div 0: " + divList[0].isEqualNode(divList[0]) + "&lt;br/&gt;";
+output.innerHTML += "div 0 equals div 1: " + divList[0].isEqualNode(divList[1]) + "&lt;br/&gt;";
+output.innerHTML += "div 0 equals div 2: " + divList[0].isEqualNode(divList[2]) + "&lt;br/&gt;";</pre>
+
+<h3 id="Results">Results</h3>
+
+<p>{{ EmbedLiveSample('Example', 480) }}</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('DOM WHATWG', '#dom-node-isequalnode', 'Node.isEqualNode')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Node.isEqualNode")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Node.isSameNode()")}}</li>
+</ul>
diff --git a/files/fa/web/api/notification/index.html b/files/fa/web/api/notification/index.html
new file mode 100644
index 0000000000..42deb63eaa
--- /dev/null
+++ b/files/fa/web/api/notification/index.html
@@ -0,0 +1,198 @@
+---
+title: Notification
+slug: Web/API/notification
+tags:
+  - API
+  - Interface
+  - NeedsTranslation
+  - Notifications
+  - Reference
+  - TopicStub
+translation_of: Web/API/Notification
+---
+<div>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</div>
+
+<p><span class="seoSummary">The <code>Notification</code> interface of the <a href="/en-US/docs/Web/API/Notifications_API">Notifications API</a> is used to configure and display desktop notifications to the user.</span> These notifications' appearance and specific functionality vary across platforms but generally they provide a way to asynchronously provide information to the user.</p>
+
+<h2 id="Constructor">Constructor</h2>
+
+<dl>
+ <dt>{{domxref("Notification.Notification", "Notification()")}}</dt>
+ <dd>Creates a new instance of the <code>Notification</code> object.</dd>
+</dl>
+
+<h2 id="Properties">Properties</h2>
+
+<h3 id="Static_properties">Static properties</h3>
+
+<p>These properties are available only on the <code>Notification</code> object itself.</p>
+
+<dl>
+ <dt>{{domxref("Notification.permission")}} {{readonlyinline}}</dt>
+ <dd>A string representing the current permission to display notifications. Possible values are:
+ <ul>
+  <li><code>denied</code> — The user refuses to have notifications displayed.</li>
+  <li><code>granted</code> — The user accepts having notifications displayed.</li>
+  <li><code>default</code> — The user choice is unknown and therefore the browser will act as if the value were denied.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Instance_properties">Instance properties</h3>
+
+<p>These properties are available only on instances of the <code>Notification</code> object.</p>
+
+<dl>
+ <dt>{{domxref("Notification.actions")}} {{readonlyinline}}</dt>
+ <dd>The actions array of the notification as specified in the constructor's <code>options</code> parameter.</dd>
+ <dt>{{domxref("Notification.badge")}} {{readonlyinline}}</dt>
+ <dd>The URL of the image used to represent the notification when there is not enough space to display the notification itself.</dd>
+ <dt>{{domxref("Notification.body")}} {{readonlyinline}}</dt>
+ <dd>The body string of the notification as specified in the constructor's <code>options</code> parameter.</dd>
+ <dt>{{domxref("Notification.data")}} {{readonlyinline}}</dt>
+ <dd>Returns a structured clone of the notification’s data.</dd>
+ <dt>{{domxref("Notification.dir")}} {{readonlyinline}}</dt>
+ <dd>The text direction of the notification as specified in the constructor's <code>options</code> parameter.</dd>
+ <dt>{{domxref("Notification.lang")}} {{readonlyinline}}</dt>
+ <dd>The language code of the notification as specified in the constructor's <code>options</code> parameter.</dd>
+ <dt>{{domxref("Notification.tag")}} {{readonlyinline}}</dt>
+ <dd>The ID of the notification (if any) as specified in the constructor's <code>options</code> parameter.</dd>
+ <dt>{{domxref("Notification.icon")}} {{readonlyinline}}</dt>
+ <dd>The URL of the image used as an icon of the notification as specified in the constructor's <code>options</code> parameter.</dd>
+ <dt>{{domxref("Notification.image")}} {{readonlyinline}}</dt>
+ <dd>The URL of an image to be displayed as part of the notification, as specified in the constructor's <code>options</code> parameter.</dd>
+ <dt>{{domxref("Notification.renotify")}} {{readonlyinline}}</dt>
+ <dd>Specifies whether the user should be notified after a new notification replaces an old one.</dd>
+ <dt>{{domxref("Notification.requireInteraction")}} {{readonlyinline}}</dt>
+ <dd>A {{jsxref("Boolean")}} indicating that a notification should remain active until the user clicks or dismisses it, rather than closing automatically.</dd>
+ <dt>{{domxref("Notification.silent")}} {{readonlyinline}}</dt>
+ <dd>Specifies whether the notification should be silent — i.e., no sounds or vibrations should be issued, regardless of the device settings.</dd>
+ <dt>{{domxref("Notification.timestamp")}} {{readonlyinline}}</dt>
+ <dd>Specifies the time at which a notification is created or applicable (past, present, or future).</dd>
+ <dt>{{domxref("Notification.title")}} {{readonlyinline}}</dt>
+ <dd>The title of the notification as specified in the first parameter of the constructor.</dd>
+ <dt>{{domxref("Notification.vibrate")}} {{readonlyinline}}</dt>
+ <dd>Specifies a vibration pattern for devices with vibration hardware to emit.</dd>
+</dl>
+
+<h4 id="Event_handlers">Event handlers</h4>
+
+<dl>
+ <dt>{{domxref("Notification.onclick")}}</dt>
+ <dd>A handler for the {{event("click")}} event. It is triggered each time the user clicks on the notification.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Notification.onclose")}}</dt>
+ <dd>A handler for the {{event("close")}} event. It is triggered when the user closes the notification.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Notification.onerror")}}</dt>
+ <dd>A handler for the {{event("error")}} event. It is triggered each time the notification encounters an error.</dd>
+ <dt>{{domxref("Notification.onshow")}}</dt>
+ <dd>A handler for the {{event("show")}} event. It is triggered when the notification is displayed.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<h3 id="Static_methods">Static methods</h3>
+
+<p>These methods are available only on the <code>Notification</code> object itself.</p>
+
+<dl>
+ <dt>{{domxref("Notification.requestPermission()")}}</dt>
+ <dd>Requests permission from the user to display notifications.</dd>
+</dl>
+
+<h3 id="Instance_methods">Instance methods</h3>
+
+<p>These properties are available only on an instance of the <code>Notification</code> object or through its <a href="/en-US/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain"><code>prototype</code></a>. The <code>Notification</code> object also inherits from the {{domxref("EventTarget")}} interface.</p>
+
+<dl>
+ <dt>{{domxref("Notification.close()")}}</dt>
+ <dd>Programmatically closes a notification.</dd>
+</dl>
+
+<h2 id="Example">Example</h2>
+
+<p>Assume this basic HTML:</p>
+
+<pre class="brush: html">&lt;button onclick="notifyMe()"&gt;Notify me!&lt;/button&gt;</pre>
+
+<p>It's possible to send a notification as follows — here we present a fairly verbose and complete set of code you could use if you wanted to first check whether notifications are supported, then check if permission has been granted for the current origin to send notifications, then request permission if required, before then sending a notification.</p>
+
+<pre class="brush: js">function notifyMe() {
+  // Let's check if the browser supports notifications
+  if (!("Notification" in window)) {
+    alert("This browser does not support desktop notification");
+  }
+
+  // Let's check whether notification permissions have already been granted
+  else if (Notification.permission === "granted") {
+    // If it's okay let's create a notification
+    var notification = new Notification("Hi there!");
+  }
+
+  // Otherwise, we need to ask the user for permission
+  else if (Notification.permission !== "denied") {
+    Notification.requestPermission().then(function (permission) {
+      // If the user accepts, let's create a notification
+      if (permission === "granted") {
+        var notification = new Notification("Hi there!");
+      }
+    });
+  }
+
+  // At last, if the user has denied notifications, and you
+  // want to be respectful there is no need to bother them any more.
+}</pre>
+
+<p>{{EmbedLiveSample('Example', '100%', 30)}}</p>
+
+<h3 id="Alternate_example_run_on_page_load">Alternate example: run on page load</h3>
+
+<p>In many cases, you don't need to be this verbose. For example, in our <a href="https://mdn.github.io/emogotchi/">Emogotchi demo</a> (<a href="https://github.com/mdn/emogotchi">see source code</a>), we simply run {{domxref("Notification.requestPermission")}} regardless to make sure we can get permission to send notifications (this uses the newer promise-based method syntax):</p>
+
+<pre class="brush: js">Notification.requestPermission().then(function(result) {
+  console.log(result);
+});</pre>
+
+<p>Then we run a simple <code>spawnNotification()</code> function when we want to fire a notification — this is passed arguments to specify the body, icon, and title we want. Then it creates the necessary <code>options</code> object and fires the notification using the {{domxref("Notification.Notification","Notification()")}} constructor.</p>
+
+<pre class="brush: js">function spawnNotification(body, icon, title) {
+  var options = {
+      body: body,
+      icon: icon
+  };
+  var n = new Notification(title, options);
+}</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 Notifications')}}</td>
+   <td>{{Spec2('Web Notifications')}}</td>
+   <td>Living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Notification")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Using the Notifications API</a></li>
+</ul>
diff --git a/files/fa/web/api/notification/requestpermission/index.html b/files/fa/web/api/notification/requestpermission/index.html
new file mode 100644
index 0000000000..c9bd799f25
--- /dev/null
+++ b/files/fa/web/api/notification/requestpermission/index.html
@@ -0,0 +1,80 @@
+---
+title: Notification.requestPermission()
+slug: Web/API/Notification/requestPermission
+translation_of: Web/API/Notification/requestPermission
+---
+<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p>
+
+<p>The <strong><code>requestPermission()</code></strong> method of the {{domxref("Notification")}} interface requests permission from the user for the current origin to display notifications.</p>
+
+<div class="note">
+<p><strong>Note:</strong> This feature is <strong>not</strong> available in {{domxref("SharedWorker")}}</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<p>The latest spec has updated this method to a promise-based syntax that works like this:</p>
+
+<pre class="brush: js">Notification.requestPermission().then(function(permission) { ... });</pre>
+
+<p>Previously, the syntax was based on a simple callback; this version is now deprecated:</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">Notification<span class="punctuation token">.</span><span class="function token">requestPermission</span><span class="punctuation token">(</span>callback<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p><code class="language-js"><span class="punctuation token">Safari Version 12.0.3 still uses callback to get the permission.</span></code></p>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>callback</code> {{optional_inline}} {{deprecated_inline("gecko46")}}</dt>
+ <dd>An optional callback function that is called with the permission value. Deprecated in favor of the promise return value.</dd>
+</dl>
+
+<h3 id="Returns">Returns</h3>
+
+<p>A {{jsxref("Promise")}} that resolves to a {{domxref("DOMString")}} with the permission picked by the user. Possible values for this string are <code>granted</code>, <code>denied</code>, or <code>default</code>.</p>
+
+<h2 id="Example">Example</h2>
+
+<p>The following snippet requests permission from the user, then logs a different result to the console depending on the user's choice.</p>
+
+<pre class="brush: js">Notification.requestPermission().then(function(result) {
+  if (result === 'denied') {
+    console.log('Permission wasn\'t granted. Allow a retry.');
+    return;
+  }
+  if (result === 'default') {
+    console.log('The permission request was dismissed.');
+    return;
+  }
+  // Do something with the granted permission.
+});</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 Notifications')}}</td>
+   <td>{{Spec2('Web Notifications')}}</td>
+   <td>Living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Notification.requestPermission")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Using the Notifications API</a></li>
+</ul>