draw line from one canvas to another canvas - html5-canvas

Question

I have multiple canvases and want to draw line between two points on canvas,in which one point is on one canvas and other point is on second(different) canvas.
How to draw line with above condition?
ctx.beginPath();
ctx.moveTo(10,30);//point on canvas1
ctx.lineTo(100,70);//point on canvas2
ctx.stroke();

Answer 1

To do this use the ctx.setTransform function of the second canvas to that of the first
function matchCoordinateSpace(ctx1,ctx2){
// get the window positions of both canvases
var can1Loc = ctx1.canvas.getBoundingClientRect();
var can2Loc = ctx2.canvas.getBoundingClientRect();
// get the relative offset
var can2Rel = {
x:can1Loc.left-can2loc.left,
y:can1Loc.top-can2loc.top,
};
// set the transforms
ctx2.setTransform(1,0,0,1,0,0); // just to make sure the first canvas coordinate space
// is correctly set.
ctx2.setTransform(1,0,0,1,can2Rel.x,can2Rel.y); // translates the canvas to the
// same coordinates as the firstChild
// The second canvas now is in the same relative coordinate space as the first;
// All drawing methods on the second canvas will be in the first canvas coordinate space.
// You only need to do this once, or whenever the two canvases change relative position.
return can2Rel; // incase you need the offset
}
//ctx1 is the first canvas
//ctx2 is the second
var can2Offset = matchCoordinateSpace(ctx1,ctx2);
// You will have to draw the line on each canvas in turn
ctx1.beginPath();
ctx1.moveTo(10,30);
ctx1.lineTo(100,70);
ctx1.stroke();
ctx2.beginPath(); // this line will match up with the line drawn on the first.
ctx2.moveTo(10,30);
ctx2.lineTo(100,70);
ctx2.stroke();