我想要canvas的大小隨著螢幕可視寬高來設定，用了 $('#canvas').css(),加canvas的drawImage方法來繪製背景，

但是繪製出來的背景總是會被拉伸，上網找了半天才知道，canvas變更CSS屬性的寬高，大小是變了，但是畫素點沒有增加，所以會導致圖片被拉伸，只能設定其attr，好嘛，這個問題解決了

下個問題又來了，寬高倒是設定好了，背景圖片又載入不出來了，看了網上一大堆要等img載入完成，使用img.onload去呼叫drawImage,但是還是會出現背景布空白的問題

推測問題：畫布在變更大小的時候，圖片沒有儲存下來

解決思路：這麼多雜七雜八的，懶得將就你，直接上promise，你給我在回調當中去繪製

上程式碼直接

let cvs =document.getElementById("canvas");

let ctx =cvs.getContext("2d");

let pro =new Promise(function(resolve,reject){

let drawHeight =document.documentElement.clientHeight //獲取可視區域高度

  let drawWidth =document.documentElement.clientWidth //獲取可視區域寬度

  drawWidth =drawWidth >500 ?500:drawWidth

  drawHeight 
 
=drawHeight >700 ?700:drawHeight

  document.getElementById('canvas').setAttribute('width',drawWidth)

document.getElementById('canvas').setAttribute('height',drawHeight)

let img =new Image();

img.src='../img/sky.png'

  img.onload=function () {

let resList = {'img':img,'width':drawWidth,'height':drawHeight}//
 
 將img和寬高通過resolve傳遞給then()

    resolve(resList)

}

}).then(function (res) {

//  console.log(res)

  ctx.drawImage(res.img,0,0,res.width,res.height)

})