<!DOCTYPE html>
<canvas id='canvas'></canvas>
<script>
var documentCanvas = document.getElementById('canvas');
documentCanvas.width = documentCanvas.height = 100;
var offscreenContext = documentCanvas.transferControlToOffscreen().getContext(
"webgl", {preserveDrawingBuffer: true});
offscreenContext.clearColor(0, 1, 0, 1);
offscreenContext.clear(offscreenContext.COLOR_BUFFER_BIT);
var pixel = new Uint8Array(4);
// 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>