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

## Canvas

> [VERSION] Base Library >= 2.21.8

> 💡 In render-script (.rjs), call this.instance.getCanvasById(canvasId). It returns a Promise that resolves to a Canvas instance (resolves to null if the node does not exist).
> The Canvas instance supports getContext, createImage, createImageData, createPath2D, requestAnimationFrame, and cancelAnimationFrame.

### Description

Canvas instance, get it in render-script via this.instance.getCanvasById

### Parameters

None


### Return Value

Type: `Canvas`

Canvas instance

#### Methods

| Method | Description |
| --- | --- |
| `getContext` | Get the Canvas drawing context |
| `createImage` | Create an image object for drawing onto the Canvas |
| `createImageData` | Create an ImageData object for pixel-level operations |
| `createPath2D` | Create a Path2D object to define paths |
| `requestAnimationFrame` | Schedule a requestAnimationFrame callback that calls the specified function before the next repaint |
| `cancelAnimationFrame` | Cancel an animation frame request scheduled by requestAnimationFrame |

### Examples

#### Get a Canvas instance in render-script

```rjs
// index.rjs
export default {
  mounted() {
    this.instance.getCanvasById('myCanvas').then((canvas) => {
      if (!canvas) return;
      const ctx = canvas.getContext('2d');
      ctx.fillStyle = '#00AEEF';
      ctx.fillRect(20, 20, 120, 60);
    });
  },
};
```