Draw line from transformed canvas to another transformed canvas - css

Question

Here I am trying to draw line between two different points on different canvas positioned using transform CSS. CSS places canvases with some angle between them
I have multiple canvases positioned using transform properties of css,
example:
var c1=document.getElementById('c1').getBoundingClientRect();
offsetX0=c1.left;
offsetY0=c1.top;
c2=document.getElementById('c2').getBoundingClientRect();
offsetX1=c2.left;
offsetY1=c2.top;
var x0=10+offsetX0;
var y0=30+offsetY0;
var x1=60+offsetX1;
var y1=60+offsetY1;
var w=Math.abs(x1-x0);
var h=Math.abs(y1-y0);
var overlay=document.getElementById('overlay');
overlay.width=w+2;
overlay.height=h+2;
overlay.style.left=(x0-1)+'px';
overlay.style.top=(y0-1)+'px';
var context=overlay.getContext('2d');
context.beginPath();
context.moveTo(1,1);//point on canvas1
context.lineTo(overlay.width-1,overlay.height-1);//point on canvas2
context.lineWidth=1;
context.stroke();
#overlay{position:absolute;bottom:5px;pointer-events:none;border:none;}
#container
{
width:500px;
height: 340px;
margin:80px auto;
position:relative;
perspective: 3500px;
perspective-origin: 100px -150px;
}
#shape {
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
}
.ready #shape {
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-o-transition: -o-transform 1s;
transition: transform 1s;
}
.ready #shape canvas
{
-webkit-transition: opacity 1s, -webkit-transform 1s;
-moz-transition: opacity 1s, -moz-transform 1s;
-o-transition: opacity 1s, -o-transform 1s;
transition: opacity 1s, transform 1s;
}
#shape canvas
{
display: block;
position: absolute;
width: 500px;
height: 340px;
left: 0px;
top: 0px;
border: 1px solid gray;
line-height: 116px;
font-size: 80px;
font-weight: bold;
color: green;
text-align: center;
}
#shape
{
border: 1px;
background-color: rgba(255, 255, 255, 0);
}
.ring {
position: absolute;
width: 500px;
height:340px;
text-align: center;
font-family: Times, serif;
font-size: 124pt;
color: black;
background-color: #F0F0F0;
}
.ring > .r1
{
translateZ(-144px);
transform: rotateY(0deg) translateZ(-250px);
background: transparent;
z-index: 1;
}
.ring > .r2
{
translateZ(-144px);
transform: rotateY(270deg) translateZ(-250px);
background: transparent;
z-index: 1;
}
.ring > .r3
{
translateZ(-144px);
transform: rotateY(0deg) translateZ(-250px);
background: transparent;
z-index: 1;
}
<div class="ready">
<div id="container">
<div id="shape" class="ring" class="panels-backface-invisible">
<canvas id="c1" class="ring r1" width="500" height="340"></canvas>
<canvas id="c2" class="ring r2"></canvas>
</div>
</div>
</div>
<canvas id="overlay"></canvas>
But when drawing, it does not match points specified on canvas and line drawn between points because canvas is transformed.