Mouse movement not accurate after rotation - css

Question

I have two canvas and when I draw something on the first one, I want to be able to draw the exact same thing but flipped like a mirror in the second one.
So I tried using CSS Transform, but it makes the mouse movement on the second Canvas not accurate.
This is my code:
http://jsfiddle.net/q5vZc/
#paint {
width: 100%;
height: 50%;
float: left;
}
#paint2 {
float: right;
width: 100%;
height: 50%;
/*pointer-events: none;*/
-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
transform: scale(-1, 1);
}
Is there a way to fix this?
I created a function that flips the mouse movement on the second canvas. In which I pass the mouse point where it was clicked and the width of the canvas.
function flipHorizontal(ponto, width) {
var x_linha = (width- ponto.x);
var y_linha = (ponto.y);
var flipped = {
x: x_linha,
y: y_linha
};
return flipped;
}

Answer 1

Do not use css scaling unless you master it, strange result will follow.
Most simple in your case is to remove any css, and just copy the left half by hand into the right part.
So use only one canvas, draw only on the left part, and each time you finished your drawings, call this function to have the left part mirrored :
// copy the the left part of the canvas on its right part
function mirrorContext(context) {
var canvas = context.canvas;
var width = canvas.width;
var height = canvas.height;
// preserve context
context.save();
// translate to middle of right part of canvas
context.translate(3*width/4, height/2);
// flip x direction
context.scale(-1, 1);
// draw left part on right part, reversed
context.drawImage(canvas
/* take left part of canvas... */ ,0, 0, width/2, height
/* ... copy it on right part */ ,-width/4, -height/2, width/2, height
);
// cancel any context change
context.restore();
}
http://jsbin.com/gigazeka/1/edit?js,output