# ImageData
An **ImageData** object stores pixel data rendered on a canvas.
> **NOTE**
>
> The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
## APIs
constructor(width: number, height: number, data?: Uint8ClampedArray, unit?: LengthMetricsUnit);
**Widget capability**: This API can be used in ArkTS widgets since API version 9.
**Atomic service API**: This API can be used in atomic services since API version 11.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Parameters**
| Name | Type | Mandatory | Description |
| ------ | ----- | ----- | ----- |
| width | number |Yes| Actual width of the rectangle on the canvas. The default unit is vp. |
| height | number |Yes| Actual height of the rectangle on the canvas. The default unit is vp.|
| data | Uint8ClampedArray |No| A one-dimensional array of color values. The values range from 0 to 255. |
| unit12+ | [LengthMetricsUnit](../js-apis-arkui-graphics.md#lengthmetricsunit12) | No | Unit mode of the **ImageData** object. The value cannot be dynamically changed once set. The configuration method is the same as that of [CanvasRenderingContext2D](ts-canvasrenderingcontext2d.md#lengthmetricsunit12).
Default value: **DEFAULT** |
## Attributes
**Widget capability**: This API can be used in ArkTS widgets since API version 9.
**Atomic service API**: This API can be used in atomic services since API version 11.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
| Name | Type | Read-Only | Optional | Description |
| ------ | -------- | --------- | ---------- | ------------------------------ |
| width | number | Yes | No | Actual width of the rectangle on the canvas.
The unit is px. |
| height | number | Yes | No | Actual height of the rectangle on the canvas.
The unit is px. |
| data | Uint8ClampedArray | Yes | No | A one-dimensional array of color values. The values range from 0 to 255. |
> **NOTE**
>
> You can use the [px2vp](ts-pixel-units.md#pixel-unit-conversion) API to convert the unit.
**Example**
```ts
// xxx.ets
@Entry
@Component
struct Translate {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private img:ImageBitmap = new ImageBitmap("common/images/1234.png")
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
.width('100%')
.height('100%')
.backgroundColor('#ffff00')
.onReady(() =>{
this.context.drawImage(this.img,0,0,130,130)
let imagedata = this.context.getImageData(50,50,130,130)
this.context.putImageData(imagedata,150,150)
})
}
.width('100%')
.height('100%')
}
}
```
