Html 在鼠标移动到前图像上时显示背景图像

我想在前面的图像上显示鼠标移动时的背景图像。我尝试过使用fabricjs，但似乎图案图像偏移在鼠标向上移动时更新

我也尝试过使用鼠标移动时使图像像素透明，但在速度较慢的设备上存在性能问题。你能提出更好的解决办法吗

HTML

<canvas id="container"></canvas>

---

JSFiddle-

没有链接。至少一个实际的例子，比如你尝试过但没有成功，对你会有帮助

var canvasWidth = window.innerWidth;
var canvasHeight = window.innerHeight;

var backgroundUrl = "http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image2.jpg";
var frontUrl = "http://tofurious.wpengine.netdna-cdn.com/images/textures/texture-8.jpg";

var canvas = new fabric.Canvas('container', {
    width:canvasWidth,
    height:canvasHeight,
    isDrawingMode: true 
});

fnDrawImage(backgroundUrl); 
drawPattern()

function fnDrawImage(_url){
    var Image = fabric.Image.fromURL(_url, function(oImg) { 
        oImg.width = canvasWidth;
        oImg.height = canvasHeight;
        oImg.selectable = false;
        canvas.add(oImg);   
    });     
}

function drawPattern(){
    var img = new Image();
    img.src = frontUrl;
    img.onload = function(){
        img.width = canvasWidth;
        img.height = canvasHeight;
        fnTexturePattern(img);
        //fnStartFreeDrawing(img);
    }
}

function fnTexturePattern(_img){
    var texturePatternBrush = new fabric.PatternBrush(canvas);  
    texturePatternBrush.source = _img;      
    canvas.freeDrawingBrush = texturePatternBrush;
    canvas.freeDrawingBrush.width = 30;
}