initial commit

2 files changed, 538 insertions, 0 deletions

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>