在画布中反映图像

Question

我有一对画布元素会将相同的图像绘制到它们中。一个画布位于屏幕的右侧，另一个位于左侧。由于两者都将具有相同的图像，我希望有图像＆＃34;面对＆＃34;屏幕左侧是一个方向，屏幕右侧是相反的方向。基本上是这样的：

左侧

右侧

JS

*//Both canvases have the same class*
var canvases = document.getElementsByClassName("holder");

var image = new Image();
image.src = "image source";

image.onload = function(){
    for(var i = 0; i < canvases.length; i++){
        var ctx = canvases[i].getcontext("2d");
        if(canvases[i].id == "leftSideId"){
            ctx.drawImage(image, 0, 0, canvases[i].width, canvases[i].height);
        }
        if(canvases[i].id == "rightSideId"){
            ctx.drawImage(image, canvases[i].width, 0, 0, canvases[i].height);
       }
    }
}

我认为只是让图像方法从画布的宽度和顶部开始，并且绘制到画布的开头就可以了，但显然它没有。任何人都可以解释我将如何做到这一点吗？