Chromium Code Reviews Chromium Code Reviews
Issue 2181183003:
Expose imageSmothing attributes in OffscreenCanvas 2D context (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master| Index: third_party/WebKit/LayoutTests/fast/canvas/OffscreenCanvas-2d-imageSmoothing.html |
| diff --git a/third_party/WebKit/LayoutTests/fast/canvas/OffscreenCanvas-2d-imageSmoothing.html b/third_party/WebKit/LayoutTests/fast/canvas/OffscreenCanvas-2d-imageSmoothing.html |
| new file mode 100644 |
| index 0000000000000000000000000000000000000000..01a465b9127be4c39ed9a6e6f7ee7c32319129d9 |
| --- /dev/null |
| +++ b/third_party/WebKit/LayoutTests/fast/canvas/OffscreenCanvas-2d-imageSmoothing.html |
| @@ -0,0 +1,40 @@ |
| +<!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); |
|
xlai (Olivia)
2016/07/27 14:18:04
I'm just wondering: why you drawImage to position
|
| + 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> |
