| <canvas id="c1" width="100" height="100"></canvas> |
| <canvas id="c2" width="100" height="100"></canvas> |
| <script> |
| // This test should show two side-by-side thin circle outlines |
| // with good visual quality, i.e. no aliasing from image downsampling. |
| |
| if (window.testRunner) { |
| testRunner.dumpAsTextWithPixelResults(); |
| testRunner.waitUntilDone(); |
| } |
| |
| var offscreenCanvas = document.createElement('canvas'); |
| offscreenCanvas.width = 500; |
| offscreenCanvas.height = 500; |
| var offscreenContext = offscreenCanvas.getContext('2d'); |
| offscreenContext.beginPath() |
| offscreenContext.arc(250, 250, 200, 0, 2 * Math.PI, false); |
| offscreenContext.lineWidth = 3; |
| offscreenContext.stroke(); |
| |
| var dstCtx = document.getElementById('c1').getContext('2d'); |
| dstCtx.drawImage(offscreenCanvas, 0, 0, 500, 500, 0, 0, 100, 100); |
| |
| var srcImage = new Image(); |
| srcImage.src = offscreenCanvas.toDataURL(); |
| srcImage.onload = function() { |
| dstCtx = document.getElementById('c2').getContext('2d'); |
| dstCtx.drawImage(srcImage, 0, 0, 500, 500, 0, 0, 100, 100); |
| testRunner.notifyDone(); |
| } |
| </script> |