670442-1.html - mozsearch

Enable keyboard shortcuts

<!DOCTYPE html>

<html>

  <body>

    <div>

      <canvas id="c1" width="400" height="400"></canvas>

      <canvas id="c2" width="400" height="400"></canvas>

    </div>

    <script type="text/javascript">

      var canv1 = document.getElementById('c1');

      var canv2 = document.getElementById('c2');

      var ctx1 = canv1.getContext('2d');

      var ctx2 = canv2.getContext('2d');

      ctx1.strokeStyle = '#FF0000';

      ctx1.moveTo(10, 10);

      ctx1.lineTo(390, 390);

      ctx1.stroke();

      function doTest()

        // Save img data

        var imgData = ctx1.getImageData(0, 0, canv1.width, canv1.height);

        // Resize canvas - seems to cause the bug

        canv1.width  = 0;

        canv1.height = 0;

        canv1.width  = 400;

        canv1.height = 400;

        // Put image data from ctx1 to ctx2

        ctx2.putImageData(imgData, 0, 0);

        // Draw canvas2 on canvas1

        ctx1.drawImage(canv2, 0, 0);

};

      doTest();

      doTest();

    </script>

  </body>

</html>