Onze vrijwilligers hebben dit artikel nog niet naar het Nederlands vertaald. Doe mee en help de klus te klaren!
U kunt het artikel ook in het English (US) lezen.

The `CanvasRenderingContext2D``.createLinearGradient()` method of the Canvas 2D API creates a gradient along the line given by the coordinates represented by the parameters.

This method returns a linear `CanvasGradient`.

NOTE: The coordinates are global, so be aware that when using "fillRect" (and friends), the coordinates are NOT relative to the coordinates specified in the "fillRect" arguments.

## Syntax

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

### Parameters

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

### Return value

`CanvasGradient`
A linear `CanvasGradient` initialized with the specified line.

## Examples

### Using the `createLinearGradient` method

This is just a simple code snippet which uses the `createLinearGradient` method to create a `CanvasGradient` with the specified start and end points. Once created, you can use the `CanvasGradient.addColorStop()` method to define new stops on the gradient with specified offsets and colors. The gradient gets applied if you set it as the current `fillStyle` and gets drawn onto the canvas when using the `fillRect()` method, for example.

#### HTML

```<canvas id="canvas"></canvas>
```

#### JavaScript

```var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.fillRect(10, 10, 200, 100);
```

Edit the code below and see your changes update live in the canvas:

###### Playable code
```<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
<input id="edit" type="button" value="Edit" />
<input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.fillRect(10,10,200,100);</textarea>
```
```var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;

function drawCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
eval(textarea.value);
}

textarea.value = code;
drawCanvas();
});

textarea.focus();
})

```

## Specifications

Specification Status Comment
HTML Living Standard
The definition of 'CanvasRenderingContext2D.createLinearGradient' in that specification.
Living Standard

## Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support Yes12 Yes Yes Yes Yes
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support Yes Yes Yes Yes Yes Yes Yes

## Gecko-specific notes

• Starting Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1), specifying non-finite values now throws `NOT_SUPPORTED_ERR` instead of `SYNTAX_ERR`.