canvas над скриншотом html2canvas не отрисовывается

Question

Схема: создаю рисунок в canvas, по click делаю html2canvas скриншот в тот же canvas (со смещением ctx.translate();), затем создаю canvas1 с другим рисунком и пытаюсь расположить над canvas со скриншотом. консоли вижу появление canvas1, на экране вижу только смещенный html2canvas скриншот!? В чем проблема?

    <head>
     <script type="text/javascript" src="html2canvas.js"></script>
     <style type="text/css">
      #content{
        position: absolute;
      }
      #canvas {
        border:2px solid red;
        position: absolute;
        z-index: 1000;
      } 
     </style>
    </head>
    <body>
     <div id="content"> 
      <canvas id=canvas width="600" height="600"></canvas>
     </div>

     <script type="text/javascript">
      let canvas = document.getElementById("canvas");
      let ctx = canvas.getContext("2d");

      function draw() {
        ctx.save();
        // blue rect
        ctx.fillStyle = '#0095DD';
        ctx.fillRect(30, 30, 100, 100); 
      }
      draw();

      canvas.addEventListener("click", e => {
        html2canvas(document.getElementById('content'),{
          width:600,
          height: 600,
          position: "relative",
        }).then(function(canvas) {
      //----screenshot div id='content' in area width:600 x height: 600
          let my_screen = canvas;
          let content = document.getElementById('content');
          console.log(content);
          content.replaceWith(my_screen);
      //----end screenshot--------------------------
      //----draw img in canvas----------------------
          let ctx = canvas.getContext("2d");
          let dataURL = canvas.toDataURL("image/png");//source of img need
          let image = new Image();
                        
          ctx.translate(50, 50);// сдвиг 

          function drawImg() {
            image.crossOrigin = true;
            image.src = dataURL;

           image.onload = function(){
              ctx.drawImage(image,0, 0);
            }
          }
        drawImg();
       //----end draw img in canvas----------------------
       //---- createElement("canvas1")-------------
        let canvas1 = document.createElement('canvas');
            canvas1.id = "canvas3";
            canvas1.width = 600;
            canvas1.height = 600;
            canvas1.style.zIndex = 10000;
            canvas1.style.position = "absolute";
            canvas1.style.border = "2px solid yellow";
            content.appendChild(canvas1);
            console.log(canvas1);
            let ctx1 = canvas3.getContext('2d');
        //----end createElement("canvas")-------------
            ctx.translate(50, 50);// смещение 

            ctx1.fillStyle = 'rgba(209, 189, 88, 1)';
            ctx1.beginPath();
            ctx1.arc(200, 300, 100, 0, Math.PI * 2, true);
            ctx1.closePath();
            ctx1.fill();
            //----end draw img in canvas1----------------------  
    });//end html2canvas
 });//end click

БЛОГ НА HUSL

canvas над скриншотом html2canvas не отрисовывается

Ответы (0 шт):