offscreencanvas-2d-printing.html | Explore in Territory

<!DOCTYPE html>
<canvas id='canvas'></canvas>
<script>
var documentCanvas = document.getElementById('canvas');
documentCanvas.width = documentCanvas.height = 100;
var offscreenContext = documentCanvas.transferControlToOffscreen().getContext(
  "2d");
offscreenContext.fillStyle = "green";
offscreenContext.fillRect(0, 0, 100, 100);

// For testing that the offscreen canvas has drawn
var testCanvas = document.createElement("canvas");
var testContext = testCanvas.getContext("2d", {willReadFrequently: true});

// Make sure that the canvas has been drawn to before capturing
function waitForCanvasToDraw() {
  return new Promise(resolve => {
    var testPixel = function() {
      testContext.drawImage(documentCanvas, 0, 0);
      // Get the pixel in the upper left corner
      var pixel = testContext.getImageData(0, 0, 1, 1).data;
      if (pixel[0] === 0 && pixel[1] === 0 && pixel[2] === 0) {
        // pixel is still empty, wait
        requestAnimationFrame(testPixel);
        return;
      } else {
        resolve();
      }
    }
    testPixel();
  });
}

if (window.testRunner) {
  testRunner.setPrinting();
  testRunner.waitUntilDone();
  waitForCanvasToDraw().then(() => {
    testRunner.notifyDone()
  });
}
</script>
chromium/third_party/blink/web_tests/printing/offscreencanvas-2d-printing.html
