小程序canvas中drawImage自适应宽度铺满屏幕

在微信小程序创建画布并且自适应屏幕宽度铺满屏幕

wxml先创建一个画布

<view class='page'>
<button bindtap='click' type='primary' size='mini'>打开</button>
  <canvas class='canvas' canvas-id='myCanvas' disable-scroll='true' ></canvas>
</view>

js使drawImage的宽度设置为获取屏幕宽度

const ctx = wx.createCanvasContext('myCanvas')
Page({
  data: {
   
  },
 
  click: function (e) {
    wx.chooseImage({
      success: function (res) {
        ctx.drawImage(res.tempFilePaths[0], 0, 0, wx.getSystemInfoSync().windowWidth, 380)
        ctx.draw(true)
      },
    })
  },

  
})

css设置宽度为100%

.canvas{
  width: 100%;
  height: 380px;
}

view 和canvas的margin左右都不能设置 要不然无法铺满屏幕

效果如下