| <!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 outputCanvas = document.getElementById('canvasOutput'); |
| var ctx = outputCanvas.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); |
| if (window.testRunner) { |
| testRunner.notifyDone(); |
| } |
| }); |
| </script> |
| |