# CanvasContext.drawImage(string imageResource, number sx, number sy, number sWidth, number sHeight, number dx, number dy, number dWidth, number dHeight)

CanvasContext 是旧版的接口，新版 [Canvas 2D](/miniprogram/dev/component/canvas.md) 接口与 Web 一致

从基础库 [2.9.0](1003706) 开始，本接口停止维护，请使用 [RenderingContext](/miniprogram/dev/api/canvas/RenderingContext) 代替

> __小程序插件__：支持

> 相关文档: [旧版画布迁移指南](/miniprogram/dev/framework/ability/canvas-legacy-migration.md)、[canvas 组件介绍](/miniprogram/dev/component/canvas.md)

## 功能描述

绘制图像到画布

## 参数

### string imageResource

所要绘制的图片资源（网络图片要通过 getImageInfo / downloadFile 先下载）

### number sx

需要绘制到画布中的，imageResource的矩形（裁剪）选择框的左上角 x 坐标

### number sy

需要绘制到画布中的，imageResource的矩形（裁剪）选择框的左上角 y 坐标

### number sWidth

需要绘制到画布中的，imageResource的矩形（裁剪）选择框的宽度

### number sHeight

需要绘制到画布中的，imageResource的矩形（裁剪）选择框的高度

### number dx

imageResource的左上角在目标 canvas 上 x 轴的位置

### number dy

imageResource的左上角在目标 canvas 上 y 轴的位置

### number dWidth

在目标画布上绘制imageResource的宽度，允许对绘制的imageResource进行缩放

### number dHeight

在目标画布上绘制imageResource的高度，允许对绘制的imageResource进行缩放

## 示例代码

有三个版本的写法：

- drawImage(imageResource, dx, dy)
- drawImage(imageResource, dx, dy, dWidth, dHeight)
- drawImage(imageResource, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) 从 1.9.0 起支持

```javascript
const ctx = wx.createCanvasContext('myCanvas')

wx.chooseImage({
  success: function(res){
    ctx.drawImage(res.tempFilePaths[0], 0, 0, 150, 100)
    ctx.draw()
  }
})

```
![](@program/dev/image/canvas/draw-image.png)