---
name: "canvasPutImageData"
mode: "api"
versionRequirements:
  - { name: "Base Library", version: "2.21.8" }
title: "ty.canvasPutImageData - 将像素数据绘制到画布"
---

## canvasPutImageData

> [VERSION] Base Library >= 2.21.8

### Description

Draw pixel data onto the canvas

### Parameters

`Params`

| Parameter | Type | Required | Description |
| --- | --- | --- | --- |
| `params` | `CanvasPutImageDataOption` | Yes | Pixel data configuration |

### Return Value

None


### Referenced Types

##### `interface` CanvasPutImageDataOption

| Property | Type | Required | Description |
| --- | --- | --- | --- |
| `canvasId` | `string` | Yes | ID of the canvas component |
| `data` | `number[]` | Yes | Image pixel data, a 1D array where every four items represent a pixel's RGBA |
| `x` | `number` | Yes | x-coordinate of the source image data in the target canvas |
| `y` | `number` | Yes | y-coordinate of the source image data in the target canvas |
| `width` | `number` | Yes | Width of the source image data rectangle |
| `height` | `number` | Yes | Height of the source image data rectangle |
| `success` | `(result: CanvasPutImageDataResult) => void` | No | Success callback |
| `fail` | `(result: CanvasPutImageDataResult) => void` | No | Callback on failure |
| `complete` | `(result: CanvasPutImageDataCompleteResult) => void` | No | Callback on complete (success or failure) |

##### `interface` CanvasPutImageDataResult

| Property | Type | Required | Description |
| --- | --- | --- | --- |
| `data` | `number[]` | Yes | Image pixel data |
| `x` | `number` | Yes | x-coordinate of the source image data in the target canvas |
| `y` | `number` | Yes | y-coordinate of the source image data in the target canvas |
| `width` | `number` | Yes | Width of the source image data rectangle |
| `height` | `number` | Yes | Height of the source image data rectangle |

##### `type` CanvasPutImageDataCompleteResult

| Property | Type | Required | Description |
| --- | --- | --- | --- |
| `type` | `string` | Yes | Result type |
| `result` | `CanvasPutImageDataResult` | Yes | Result data |


### Examples

#### Draw pixel data onto the canvas

```ts
ty.canvasPutImageData({
  canvasId: 'myCanvas',
  data: [255, 0, 0, 255, 0, 255, 0, 255],
  x: 0,
  y: 0,
  width: 2,
  height: 1,
  success() {
    console.log('Drawn successfully');
  },
});
```