在变动时添加一些判断就好了

range.addEventListener('change',function(){//range = document.getElementById("range")获取滑杆
            var sx = canvas.width*(1-range.value)/2;//图片左上角x坐标
            var sy = canvas.height*(1-range.value)/2;//图片左上角Y坐标
            context.clearRect(0,0,canvas.width,canvas.height);//清除context的图像
            context.drawImage(image,sx,sy,canvas.width*range.value,canvas.height*range.value);//重绘图片
            if(range.value<1){   //判断放大比例是否少于1
                context.drawImage(offsetCanvas,
                                  sx+canvas.width*range.value-offsetCanvas.width,//水印的左上角x值
                                  //sx是图片的左上角位置，加上图片右下角的x值就是整个canvas的左边界                                  //到图片的右下角x的总距离，再减去水印自身的x值，就是水印左上角x值
                                  sy+canvas.height*range.value-offsetCanvas.height);//水印的左上角Y值
            }else{
                context.drawImage(offsetCanvas,
                                  canvas.width-offsetCanvas.width,
                                  canvas.height-offsetCanvas.height);
            }