---
name: "CanvasContext.createLinearGradient"
mode: "api"
versionRequirements:
  - { name: "Base Library", version: "2.21.8" }
title: "createLinearGradient"
---

## CanvasContext.createLinearGradient

> [VERSION] Base Library >= 2.21.8

### Description

Create a linear gradient

### Parameters

`Params`

| Parameter | Type | Required | Description |
| --- | --- | --- | --- |
| `x0` | `number` | Yes | Start point x coordinate |
| `y0` | `number` | Yes | Start point y coordinate |
| `x1` | `number` | Yes | End point x coordinate |
| `y1` | `number` | Yes | End point y coordinate |

### Return Value

Type: `CanvasGradient`

CanvasGradient object

### Examples

#### Create a linear gradient

```ts
const ctx = ty.createCanvasContext('myCanvas');
const gradient = ctx.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, '#ff0000');
gradient.addColorStop(1, '#00ff00');
ctx.setFillStyle(gradient);
ctx.fillRect(0, 0, 200, 100);
ctx.draw();
```