third_party/WebKit/LayoutTests/fast/canvas/canvas-imageSmoothingEnabled-patterns.html

   1 <html>
   2  <head>
   3  <script type="application/x-javascript">
   4     function createImage() {
   5         var image = document.createElement('canvas');
   6         image.height = 2;
   7         image.width = 2;
   8         // We use this to colour the individual pixels
   9         var dotter = image.getContext('2d').createImageData(1, 1);
  10
  11         // Colour the black pixesl.
  12         dotter.data[0] = 0;
  13         dotter.data[1] = 0;
  14         dotter.data[2] = 0;
  15         dotter.data[3] = 255;
  16         image.getContext('2d').putImageData(dotter, 0, 0);
  17         image.getContext('2d').putImageData(dotter, 1, 1);
  18
  19         // Colour the white pixels.
  20         dotter.data[0] = 255;
  21         dotter.data[1] = 255;
  22         dotter.data[2] = 255;
  23         dotter.data[3] = 255;
  24         image.getContext('2d').putImageData(dotter, 1, 0);
  25         image.getContext('2d').putImageData(dotter, 0, 1);
  26         return image;
  27     }
  28
  29     function drawFillRect(canvas, image, smoothing) {
  30         var ctx = canvas.getContext('2d');
  31         var pattern = ctx.createPattern(image, "repeat");
  32         ctx.fillStyle = pattern;
  33         ctx.imageSmoothingEnabled = smoothing;
  34         ctx.scale(10, 10);
  35         ctx.fillRect(0, 0, canvas.width, canvas.height);
  36     }
  37
  38     function drawFill(canvas, image, smoothing) {
  39         var ctx = canvas.getContext('2d');
  40         var pattern = ctx.createPattern(image, "repeat");
  41         ctx.fillStyle = pattern;
  42         ctx.imageSmoothingEnabled = smoothing;
  43         ctx.scale(10, 10);
  44         ctx.beginPath();
  45         ctx.moveTo(0,0);
  46         ctx.lineTo(10, 10);
  47         ctx.lineTo(0, 10);
  48         ctx.fill();
  49     }
  50
  51     function drawStroke(canvas, image, smoothing) {
  52         var ctx = canvas.getContext('2d');
  53         var pattern = ctx.createPattern(image, "repeat");
  54         ctx.strokeStyle = pattern;
  55         ctx.lineWidth = 5;
  56         ctx.imageSmoothingEnabled = smoothing;
  57         ctx.scale(10, 10);
  58         ctx.beginPath();
  59         ctx.moveTo(0,0);
  60         ctx.lineTo(10, 10);
  61         ctx.stroke();
  62     }
  63
  64     function draw() {
  65         if (window.testRunner)
  66             testRunner.dumpAsTextWithPixelResults();
  67
  68         var image = createImage();
  69         drawFillRect(document.getElementById('unsmoothedFillRect'), image,
  70             false);
  71         drawFillRect(document.getElementById('smoothedFillRect'), image,
  72             true);
  73         drawFill(document.getElementById('unsmoothedFill'), image,
  74             false);
  75         drawFill(document.getElementById('smoothedFill'), image,
  76             true);
  77         drawStroke(document.getElementById('unsmoothedStroke'), image,
  78             false);
  79         drawStroke(document.getElementById('smoothedStroke'), image,
  80             true);
  81     }
  82
  83   </script>
  84  </head>
  85  <body onload="draw()">
  86    <div>
  87      <canvas id="unsmoothedFillRect" width="100" height="100"></canvas>
  88      <canvas id="smoothedFillRect" width = "100" height="100"></canvas>
  89    </div>
  90    <div>
  91      <canvas id="unsmoothedFill" width="100" height="100"></canvas>
  92      <canvas id="smoothedFill" width = "100" height="100"></canvas>
  93    </div>
  94    <div>
  95      <canvas id="unsmoothedStroke" width="100" height="100"></canvas>
  96      <canvas id="smoothedStroke" width = "100" height="100"></canvas>
  97    </div>
  98  </body>
  99 </html>