I have a pair of canvas elements that will draw the same image to both of them. One canvas is on the right side of the screen, the other on the left side. since both are going to have the same image, I would like to have the image "facing" one way on the left side of the screen, and the opposite way on the right side of the screen. Basically like this:
Left side
Right Side
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);
}
}
}
I thought just having the image method start at the width and top of the canvas and drawing to the start of the canvas would do it, but apparently it doesn't. Can anyone explain how I would go about doing this?
