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

## createCanvasContext

> [VERSION] Base Library >= 2.21.8

> 💡 The returned CanvasContext is bound to a canvas component via canvasId and operates on that component

### Description

Creates a CanvasContext drawing context for the canvas

### Parameters

`Params`

| Parameter | Type | Required | Description |
| --- | --- | --- | --- |
| `canvasId` | `string` | Yes | ID of the canvas component |

### Return Value

Type: `CanvasContext`

CanvasContext instance

### Examples

#### Create canvas context

```ts
Page({
  onReady() {
    const ctx = ty.createCanvasContext('myCanvas');
    ctx.setFillStyle('#ff0000');
    ctx.fillRect(10, 10, 150, 100);
    ctx.draw();
  },
});
```