blob: 2c20cf2f5bdc2f4e674e346d29c45f9b82150964 [file] [log] [blame]
<!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 id='myWorker' type='text/worker'>
self.onmessage = function(msg) {
var osCanvas = new OffscreenCanvas(250, 50);
var ctx = osCanvas.getContext('2d');
ctx.scale(10, 10)
ctx.imageSmoothingEnabled = false;
ctx.drawImage(msg.data, 0, 0);
ctx.imageSmoothingEnabled = true;
ctx.imageSmoothingQuality = 'low';
ctx.drawImage(msg.data, 6, 0);
ctx.imageSmoothingQuality = 'medium';
ctx.drawImage(msg.data, 12, 0);
ctx.imageSmoothingQuality = 'high';
ctx.drawImage(msg.data, 18, 0);
var outImage = osCanvas.transferToImageBitmap();
self.postMessage(outImage, [outImage]);
}
</script>
<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 blob = new Blob([document.getElementById('myWorker').textContent]);
var worker = new Worker(URL.createObjectURL(blob));
worker.addEventListener('message', msg => {
var outputCtx = document.getElementById('canvasOutput').getContext('bitmaprenderer');
outputCtx.transferFromImageBitmap(msg.data);
if (window.testRunner) {
testRunner.notifyDone();
}
});
worker.postMessage(image, [image]);
});
</script>