---
name: "canvas"
mode: "component"
versionRequirements:
  - { name: "Base Library", version: "2.10.0" }
title: "canvas - Canvas"
---

## canvas

> [VERSION] Base Library >= 2.10.0

### Description

Canvas component for drawing graphics.

### Props

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `type` | `string` | No | `"2d"` | Canvas type |
| `canvas-id` | `string` | Yes | `""` | Unique identifier for the canvas component |
| `disable-scroll` | `boolean` | No | `false` | Disable page scrolling and pull-to-refresh while moving inside the canvas |
| `autoResize` | `boolean` | No | `false` | Whether to enable auto-resize for the canvas. The drawing surface width and height will fill 100% of the canvas element size, and a resize event will be dispatched; you can listen to bind:resize and redraw in the callback |

#### Events

| Event | Type | Description |
| --- | --- | --- |
| `resize` | `(event: CanvasResizeEvent) => void` | Triggered when the canvas size changes (requires auto-resize to be enabled) |

**CanvasResizeEvent**

| Field | Type | Description |
| --- | --- | --- |
| `type` | `"resize"` |  |
| `detail` | `CanvasResizeDetail` |  |

### Examples

#### Basic usage

*index.tyml*

```xml
<canvas canvas-id="myCanvas" type="2d" class="canvas" />
```

*index.tyss*

```css
.canvas {
  width: 300px;
  height: 300px;
  background-color: #f5f5f5;
}
```

*index.js*

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

#### Touch drawing

*index.tyml*

```xml
<canvas
  canvas-id="drawCanvas"
  type="2d"
  class="canvas"
  disable-scroll
  bind:touchstart="onTouchStart"
  bind:touchmove="onTouchMove"
  bind:touchend="onTouchEnd"
/>
```

*index.tyss*

```css
.canvas {
  width: 100%;
  height: 400px;
  border: 1px solid #eee;
}
```

*index.js*

```javascript
Page({
  data: { drawing: false },
  onReady() {
    this.ctx = ty.createCanvasContext('drawCanvas');
    this.ctx.setStrokeStyle('#1890ff');
    this.ctx.setLineWidth(3);
    this.ctx.setLineCap('round');
  },
  onTouchStart(e) {
    this.setData({ drawing: true });
    var touch = e.touches[0];
    this.ctx.beginPath();
    this.ctx.moveTo(touch.x, touch.y);
  },
  onTouchMove(e) {
    if (!this.data.drawing) return;
    var touch = e.touches[0];
    this.ctx.lineTo(touch.x, touch.y);
    this.ctx.stroke();
    this.ctx.draw(true);
    this.ctx.moveTo(touch.x, touch.y);
  },
  onTouchEnd() {
    this.setData({ drawing: false });
  },
});
```


<DemoBlock
  githubUrl="https://github.com/Tuya-Community/tuya-miniapp-demo/tree/master/canvas" qrCodeUrl="/images/qrCode/canvas.png"
  lang="en">
</DemoBlock>

### Related Documents

- Use [rjs](/en/miniapp/develop/miniapp/framework/api/render) for drawing to get the canvas node and draw charts, animations, and various graphics.

- Use the [ty.createCanvasContext](/en/miniapp/develop/miniapp/api/canvas/CanvasContext/createCanvasContext) API in the logic layer JavaScript. This method cannot get the canvas node.