画布统一使用像素px做为单位，需要做额外处理。

index.wxml

<canvas style="width: 400rpx;height: 400rpx;" type="2d" id="myCanvas" canvas-id="myCanvas"></canvas>

index.js

//Page
const query = wx.createSelectorQuery()

//自定义组件
const query = wx.createSelectorQuery().in(this)

获取canvas

query.select('#myCanvas')
     .fields({ node: true, size: true })
     .exec((res) => {
        const canvas = res[0].node
        const ctx = canvas.getContext('2d')
      })

获取屏幕密度、逻辑像素设计比

const info = wx.getSystemInfoSync()

//屏幕密度
const dpr = info.pixelRatio 

//逻辑像素设计比
const pr = info.screenWidth / 750

设置画布宽高

canvas.width = res[0].width * dpr
canvas.height = res[0].height * dpr

处理图片，需要在图片加载完成后，才能在画布上绘制出图片

let src = '图片地址(本地图片/网络图片)'

//获取图片信息
wx.getImageInfo({
    src: src,
    success: (info) => {
        //图片信息获取成功会拿到info.path

        //想要绘制图片，都需要进行这一步
        //创建image对象
        var img = canvas.createImage()
        img.src = info.path
        
        img.onload = function () {
           //图片加载成功，去绘制
        }

        img.onerror = function () {
           //图片加载失败
        }
    },
    fail () {
        //图片信息获取失败
    }
})

绘制

//若希望匹配逻辑像素rpx2px
// 宽(px)
let w = 100 * pr * dpr

// 高(px)
let h = 100 * pr * dpr

// x坐标
let x = 100 * pr * dpr

// y坐标
let y = 100 * pr * dpr

//绘制
ctx.drawImage(img, x, y, w, h)

绘制完成，去生成canvas图片本地地址

wx.canvasToTempFilePath({
    // 重点：需要传入canvas对象
    canvas: canvas, 
    canvasId: 'myCanvas',
    success: (res) => {
        let tempFilePath = res.tempFilePath
        this.setData({
            tempFilePath: tempFilePath
        })
    },
    fail: function (res) {
        
    }
}, this)  //自定义组件需要传入组件本身this

保存到相册

wx.saveImageToPhotosAlbum({
    filePath: this.data.tempFilePath,
    success (res) {
        wx.showToast({
            title: '已保存到相册',
            icon: 'success'
        })
    }
})