| <!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> |