HTML Implementation Layer Overlay

<div id= "Canvasesdiv" style= "position:relative; width:400px; height:300px "><canvas id=" Layer1 "style=" z-index:1; Position:absolute; left:0px; top:0px; "height=" 300px "width=" >this text is displayed if your browser does no support HTML5 CANVAS.</CANVAS&G T;<canvas id= "Layer2" style= "Z-INDEX:2; Position:absolute; left:20px; top:10px; "height=" 300px "width=" >this text is displayed if your browser does no support HTML5 canvas.</canvas& gt;</div><script>  layer1 = document.getElementById ("Layer2"). GetContext ("2d"); Layer2 = document.getElementById ("Layer2"). GetContext ("2d"); Layer1.moveto (0);  Layer1.lineto (0, 50); Layer1.lineto (50, 100); Layer1.lineto (100, 50); Layer1.lineto (50, 0); Layer1.stroke (); Layer2.moveto (  ); Layer2.lineto (50, 52); Layer2.moveto (a);  Layer2.lineto (60, 52); Layer2.moveto (a);  Layer2.lineto (70, 52); Layer2.stroke ();</script>

<canvas id= "MYCANVAS1" width= "500px" height= "400px" ></canvas>   <canvas id= "MyCanvas2" width= " 500px "height=" 400px "style=" Z-index:2 "></canvas>    <script>      var context1 = document.getElementById ("MYCANVAS1"). GetContext ("2d");      var context2 = document.getElementById ("MyCanvas2"). GetContext ("2d");        Context1.fillstyle = "Red";      Context1.fillrect (50,50,100,100);      Context1.fillstyle = "Rgba (0,0,255,0.4)";      Context1.fillrect (80,80,100,100);      Context1.fill ();      Context2.fill ();  </script>  

　　

HTML Implementation Layer Overlay