From 95aca4b4d8fa62815d4bd412fff1a364f842814a Mon Sep 17 00:00:00 2001 From: Ryan Johnson Date: Thu, 29 Apr 2021 16:16:42 -0700 Subject: remove retired locales (#699) --- .../createlineargradient/index.html | 114 --------------------- 1 file changed, 114 deletions(-) delete mode 100644 files/fa/web/api/canvasrenderingcontext2d/createlineargradient/index.html (limited to 'files/fa/web/api/canvasrenderingcontext2d/createlineargradient/index.html') diff --git a/files/fa/web/api/canvasrenderingcontext2d/createlineargradient/index.html b/files/fa/web/api/canvasrenderingcontext2d/createlineargradient/index.html deleted file mode 100644 index d7a1e1bde6..0000000000 --- a/files/fa/web/api/canvasrenderingcontext2d/createlineargradient/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: CanvasRenderingContext2D.createLinearGradient() -slug: Web/API/CanvasRenderingContext2D/createLinearGradient -translation_of: Web/API/CanvasRenderingContext2D/createLinearGradient ---- -
{{APIRef}}
- -

The CanvasRenderingContext2D.createLinearGradient() method of the Canvas 2D API creates a gradient along the line connecting two given coordinates.

- -

- -

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.

- -
-

Note: 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.

-
- -

Syntax

- -
CanvasGradient ctx.createLinearGradient(x0, y0, x1, y1);
-
- -

The createLinearGradient() method is specified by four parameters defining the start and end points of the gradient line.

- -

Parameters

- -
-
x0
-
The x-axis coordinate of the start point.
-
y0
-
The y-axis coordinate of the start point.
-
x1
-
The x-axis coordinate of the end point.
-
y1
-
The y-axis coordinate of the end point.
-
- -

Return value

- -
-
{{domxref("CanvasGradient")}}
-
A linear CanvasGradient initialized with the specified line.
-
- -

Examples

- -

Filling a rectangle with a linear gradient

- -

This example initializes a linear gradient using the createLinearGradient() 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.

- -

HTML

- -
<canvas id="canvas"></canvas>
-
- -

JavaScript

- -
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);
-
- -

Result

- -

{{ EmbedLiveSample('Filling_a_rectangle_with_a_linear_gradient', 700, 180) }}

- -

Specifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-createlineargradient", "CanvasRenderingContext2D.createLinearGradient")}}{{Spec2('HTML WHATWG')}}
- -

Browser compatibility

- - - -

{{Compat("api.CanvasRenderingContext2D.createLinearGradient")}}

- -

Gecko-specific notes

- - - -

See also

- - -- cgit v1.2.3-54-g00ecf