OffscreenCanvas-2d-imageSmoothing.html

<!DOCTYPE html>
<p>Below this text, there should be a checker pattern that is drawn pixelated, and with low, medium and high filtering quality.</p>
<canvas id="canvasOutput" width="250" height="50"></canvas>
<script>
if (window.testRunner) {
  testRunner.waitUntilDone();
}
var checkerCanvas = document.createElement('canvas');
checkerCanvas.width = checkerCanvas.height = 5;
var checkerContext = checkerCanvas.getContext('2d');
var checkerData = checkerContext.createImageData(5,5);
for (pixel = 0; pixel < 25; pixel++) {
    var color = (pixel % 2) * 255;
    checkerData.data[pixel * 4 + 0] = color;
    checkerData.data[pixel * 4 + 1] = color;
    checkerData.data[pixel * 4 + 2] = color;
    checkerData.data[pixel * 4 + 3] = 255;
}
checkerContext.putImageData(checkerData, 0, 0);
createImageBitmap(checkerCanvas).then(image => {
    var osCanvas = new OffscreenCanvas(250, 50);
    var ctx = osCanvas.getContext('2d');
    ctx.scale(10, 10)
    ctx.imageSmoothingEnabled = false;
    ctx.drawImage(image, 0, 0);
    ctx.imageSmoothingEnabled = true;
    ctx.imageSmoothingQuality = 'low';
    ctx.drawImage(image, 6, 0);
    ctx.imageSmoothingQuality = 'medium';
    ctx.drawImage(image, 12, 0);
    ctx.imageSmoothingQuality = 'high';
    ctx.drawImage(image, 18, 0);
    var outputCanvas = document.getElementById('canvasOutput');
    var outputCanvasRenderer = outputCanvas.getContext('bitmaprenderer');
    outputCanvasRenderer.transferFromImageBitmap(osCanvas.transferToImageBitmap());
    if (window.testRunner) {
        testRunner.notifyDone();
    }
});
</script>
chromium/third_party/blink/web_tests/fast/canvas/OffscreenCanvas-2d-imageSmoothing.html
