canvas圖片實現(xiàn)自適應(yīng)

$('.container').prepend(canvas);
// 創(chuàng)建圖片
let src = $(".image-hero-swimmer").css("background-image").split("\"")[1];
console.log(src,'src');

let imageObj = new Image();
imageObj.src = src;
imageObj.addEventListener('load', () => {
    canvas.style.width = window.innerWidth+'px';
    canvas.style.height = window.innerHeight+'px';
    canvas.width  = window.innerWidth;
    canvas.height = window.innerHeight;
    ctx.drawImage(imageObj, 0, 0,window.innerWidth,window.innerHeight);

  })
  // 調(diào)整窗口重新畫圖
  $(window).resize(resizeCanvas);
  function resizeCanvas() {
    draw_canvas_image();
};

canvas圖片向下滾動縮放

function draw_canvas_image(h,direct) {
    let src = $(".image-hero-swimmer").css("background-image").split("\"")[1];
    let imageObj = new Image();
    imageObj.src = src;
    canvas.style.width =  window.innerWidth+'px';
    canvas.style.height =  window.innerHeight+'px';
    if(direct =='down'){
        var h = --window.innerHeight;
        var nWidth= parseInt(canvas.style.width);
        var nHeight= parseInt(canvas.style.height);
        canvas.style.height = h+'px';
    }
    if(direct == 'up') {
        var h = ++window.innerHeight;
        var nWidth= parseInt(canvas.style.width);
        var nHeight= parseInt(canvas.style.height);
        // canvas.style.width = w+'px';
        canvas.style.height = h+'px';
        if( nHeight > window.innerHeight){
            canvas.style.height = window.innerHeight+'px';
        }
    }
    canvas.width  = window.innerWidth;
    canvas.height = window.innerHeight;
    ctx.drawImage(imageObj, 0, 0,window.innerWidth,window.innerHeight);

}

現(xiàn)在的縮放效果很差，參考了這個https://www.apple.com/apple-w... 他的canvas實現(xiàn)是沒有改變寬高，想請教下有這種向下滾動縮放canvas是用的什么方式