createLinearGradient method
Creates an object that represents a linear gradient to use in a canvas context.
![]() ![]() |
Syntax
var retval = CanvasRenderingContext2D.createLinearGradient(x0, y0, x1, y1);Parameters
- x0 [in]
-
Type: number
The x-coordinate, in pixels, of the start point of the gradient.
- y0 [in]
-
Type: number
The y-coordinate, in pixels, of the start point of the gradient.
- x1 [in]
-
Type: number
The x-coordinate, in pixels, of the end point of the gradient.
- y1 [in]
-
Type: number
The y-coordinate, in pixels, of the end point of the gradient.
Return value
Type: ICanvasGradient
A CanvasGradient object that represents the new linear gradient.
Standards information
- The canvas element, Section 5
Examples
The following code example creates a gradient. In this example, the gradient width is set to canvas width. There are two rectangles that are offset to show how the gradient goes across the whole canvas, and only certain colors are displayed in the rectangles. See the sample in action.
<!DOCTYPE html> <html> <head> <title>AddColorStop example</title> <style type="text/css"> #MyCanvas { border:1px solid black; } </style> </head> <body> <canvas id="MyCanvas" width="600" height="500">This browser or document mode doesn't support canvas</canvas> <script> var canvas = document.getElementById("MyCanvas"); if (canvas.getContext) { var ctx = canvas.getContext("2d"); gradient = ctx.createLinearGradient(0, 0, canvas.width, 0); // Add the colors with fixed stops at 1/4 of the width. gradient.addColorStop("0", "magenta"); gradient.addColorStop(".25", "blue"); gradient.addColorStop(".50", "green"); gradient.addColorStop(".75", "yellow"); gradient.addColorStop("1.0", "red"); // Use the gradient. ctx.fillStyle = gradient; ctx.fillRect(0, 0, 300, 250); ctx.fillRect(250, 300, 600, 500); } </script> </body> </html>
See also

