# canvas绘制相关问题

**背景知识：**

* ArkUI定义了[像素单位](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-pixel-units)px、vp，和底层canvas接口参数的单位有关。

* canvas组件为同层渲染组件。使用ArkUI的canvas组件绘制图像。

## 为什么has.canvasPutImageData接口绘制的图像宽高与参数值不一致

**问题现象：**

开发者调用has.canvasPutImageData接口绘制canvas图像，预期效果是绘制的宽高和开发者传参width、height一致；实际效果是绘制的宽高比传参width、height要小。

**问题原因：**

has.canvasPutImageData的实现原理是将开发者传的像素数据（单位为px）转换为[imageData](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-components-canvas-imagedata)对象（单位为vp），再通过canvas方法[putImageData](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-components-canvas-common-method#putimagedata)绘制在canvas组件上。由于单位转换（px→vp），最终导致canvas绘制宽高和传值width、height不一致。

**解决措施：**

建议开发者使用[CanvasRenderingContext2D](https://developer.huawei.com/consumer/cn/doc/atomic-ascf/apis-canvas-rendering-context-2d)接口替代CanvasContext接口，[CanvasRenderingContext2D.putImageData](https://developer.huawei.com/consumer/cn/doc/atomic-ascf/apis-canvas-rendering-context-2d#canvasrenderingcontext2dputimagedata)已解决相关问题，且新版接口在性能与功能支持方面均有显著优化，能够提供更为稳定和高效的渲染能力。

## 为什么has.canvasGetImageData返回的width、height与传入参数值不一致

**问题现象：**

开发者调用has.canvasGetImageData接口获取指定区域内的像素数据，预期结果是返回值width、height和传入的width、height一致；实际结果是返回值width、height比传入的width、height要大。

**问题原因：**

has.canvasGetImageData的实现原理是调用canvas方法[getImageData](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-components-canvas-common-method#getimagedata)获取canvas组件指定区域内的像素（接口参数默认单位为vp），得到返回值后，将数据返回给开发者。但是ASCF框架将返回值imageData对象的像素单位设置为px。由于像素单位不一致，导致接口的返回值width、height和开发者传的参数width、height不一致。

**解决措施：**

建议开发者使用[CanvasRenderingContext2D](https://developer.huawei.com/consumer/cn/doc/atomic-ascf/apis-canvas-rendering-context-2d)接口替代CanvasContext接口，[CanvasRenderingContext2D.getImageData](https://developer.huawei.com/consumer/cn/doc/atomic-ascf/apis-canvas-rendering-context-2d#canvasrenderingcontext2dgetimagedata)已解决相关问题，且新版接口在性能与功能支持方面均有显著优化，能够提供更为稳定和高效的渲染能力。