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

## CanvasContext.createCircularGradient

> [VERSION] Base Library >= 2.21.8

### Description

Create a circular gradient

### Parameters

`Params`

| Parameter | Type | Required | Description |
| --- | --- | --- | --- |
| `x` | `number` | Yes | Center x coordinate |
| `y` | `number` | Yes | Center y coordinate |
| `r` | `number` | Yes | Radius |

### Return Value

Type: `CanvasGradient`

CanvasGradient object

### Examples

#### Create a circular gradient

```ts
const ctx = ty.createCanvasContext('myCanvas');
const gradient = ctx.createCircularGradient(100, 100, 50);
gradient.addColorStop(0, '#ff0000');
gradient.addColorStop(1, '#0000ff');
ctx.setFillStyle(gradient);
ctx.arc(100, 100, 50, 0, 2 * Math.PI);
ctx.fill();
ctx.draw();
```