third_party/WebKit/LayoutTests/fast/canvas/downsample-quality.html

   1 <canvas id="c1" width="100" height="100"></canvas>
   2 <canvas id="c2" width="100" height="100"></canvas>
   3 <script>
   4 // This test should show two side-by-side thin circle outlines
   5 // with good visual quality, i.e. no aliasing from image downsampling.
   6 // Both circles should look identical.
   7
   8 if (window.testRunner) {
   9         testRunner.dumpAsTextWithPixelResults();
  10         testRunner.waitUntilDone();
  11 }
  12
  13 var offscreenCanvas = document.createElement('canvas');
  14 offscreenCanvas.width = 500;
  15 offscreenCanvas.height = 500;
  16 var offscreenContext = offscreenCanvas.getContext('2d');
  17 offscreenContext.beginPath()
  18 offscreenContext.arc(250, 250, 200, 0, 2 * Math.PI, false);
  19 offscreenContext.lineWidth = 3;
  20 offscreenContext.stroke();
  21
  22 var dstCtx = document.getElementById('c1').getContext('2d');
  23 dstCtx.drawImage(offscreenCanvas, 0, 0, 500, 500, 0, 0, 100, 100);
  24
  25 var srcImage = new Image();
  26 srcImage.src = offscreenCanvas.toDataURL();
  27 srcImage.onload = function() {
  28         dstCtx = document.getElementById('c2').getContext('2d');
  29         dstCtx.drawImage(srcImage, 0, 0, 500, 500, 0, 0, 100, 100);
  30         testRunner.notifyDone();
  31 }
  32 </script>