从转换的画布到另一个转换的画布绘制线条

Question

这里我试图在使用变换CSS定位的不同画布上的两个不同点之间绘制线条。 CSS将画布放在它们之间有一定角度 我有多个画布使用css的变换属性定位， 例如：

＆＃13;

＆＃13;

 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();

＆＃13;

#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;
	}

＆＃13;

<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>
    

＆＃13;

＆＃13;

＆＃13;

但是在绘制时，它与画布上指定的点和点之间绘制的线不匹配，因为画布已被转换。