我试图让网站上的一个部分有两个背景图像，当指针在屏幕上移动时，会显示底部的一个。
我对javascript还是新手，我的代码是由我在谷歌上找到的零碎组成的，但无论出于何种原因，我似乎无法让顶部图像与底部图像共享相同的分辨率和图像大小。
以下是指向我的代码笔的链接：https://codepen.io/awktopus/pen/zywkoko
这是我的代码：
html:

<canvas id="main-canvas" id="canvas-size" class="background-size"></canvas>

<image src="https://i.imgur.com/PbGAAIy.jpg" id="upper-image" class="hidden-bg"></img>

<image src="https://i.imgur.com/Gx14sKW.jpg" id="lower-image" class="hidden-bg"></img>

css:

.hidden-bg {
  display: none;
}

js:

var can = document.getElementById('main-canvas');
var ctx = can.getContext('2d');
can.width  = window.innerWidth;
can.height  = window.innerWidth / 2;
var upperImg = document.getElementById("upper-image");
var lowerImg = document.getElementById("lower-image");
var pat = ctx.createPattern(upperImg, "no-repeat");
var canvas = ctx.canvas ;
var hRatio = canvas.width  / lowerImg.width    ;
var vRatio =  canvas.height / lowerImg.height  ;
   var ratio  = Math.max ( hRatio, vRatio );
   var centerShift_x = ( canvas.width - lowerImg.width*ratio ) / 2;
   var centerShift_y = ( canvas.height - lowerImg.height*ratio ) / 2;

can.addEventListener('mousemove', function(e) {
    var mouse = getMouse(e, can);
    redraw(mouse);
}, false);

function redraw(mouse) {
    can.width = can.width;
    ctx.clearRect(0,0,canvas.width, canvas.height);
    ctx.drawImage(lowerImg, 0,0, lowerImg.width, lowerImg.height, centerShift_x,centerShift_y,lowerImg.width*ratio, lowerImg.height*ratio);  
    ctx.beginPath();
    ctx.rect(0,0,can.width,can.height);
    ctx.arc(mouse.x, mouse.y, 250, 0, Math.PI*2, true)
    ctx.clip();
    ctx.fillStyle = pat;
    ctx.fillRect(0, 0, lowerImg.width, lowerImg.height, centerShift_x, centerShift_y, lowerImg.width*ratio, lowerImg.height*ratio);
}

var img = new Image();
img.onload = function() {
    redraw({x: -500, y:-500})
}

function getMouse(e, canvas) {
    var element = canvas,
        offsetX = 0,
        offsetY = 0,
        mx, my;

if (element.offsetParent !== undefined) {
        do {
            offsetX += element.offsetLeft;
            offsetY += element.offsetTop;
        } while ((element = element.offsetParent));
    }

    mx = e.pageX - offsetX;
    my = e.pageY - offsetY;

    return {
        x: mx,
        y: my
    };
}