---
name: "CanvasGradient"
mode: "api"
versionRequirements:
  - { name: "Base Library", version: "2.21.8" }
title: "CanvasGradient"
---

## CanvasGradient

> [VERSION] Base Library >= 2.21.8

> 💡 Can be created via CanvasContext.createLinearGradient or CanvasContext.createCircularGradient.

### Description

CanvasGradient object that represents a gradient

### Parameters

None


### Return Value

Type: `CanvasGradient`

CanvasGradient instance

#### Methods

| Method | Description |
| --- | --- |
| `addColorStop` | Add a gradient color stop |

### Examples

#### Use 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();
```