<!DOCTYPE html>
<canvas id="canvasCPU" width="300" height="300"></canvas>
<canvas id="canvasGPU" width="300" height="300"></canvas>
<script>
// Testing that willReadFrequently works the same with HTMLCanvasElement and
// OffscreenCanvas with a placeholder canvas
var canvasCPU = document.getElementById("canvasCPU");
var ctxCPU = canvasCPU.getContext('2d', { willReadFrequently: true });

var canvasGPU = document.getElementById("canvasGPU");
var ctxGPU = canvasGPU.getContext('2d', { willReadFrequently: false });

var img = document.createElement('IMG');
img.onload = function () {
  ctxCPU.drawImage(img, 0, 0, 300, 300);
  ctxGPU.drawImage(img, 0, 0, 300, 300);
}

// This src image corresponds to a gradient white line that looks different in
// CPU and GPU backend
img.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQ" +
"AAAAGklEQVQYlWNgYGD4j4z/////H12MYVQRUYoAkYZrlWt0UekAAAAASUVORK5CYII=";

</script>