canvas-imageSmoothingEnabled-patterns.html

<html>
 <head>
 <script type="application/x-javascript">
    function createImage() {
        var image = document.createElement('canvas');
        image.height = 2;
        image.width = 2;
        // We use this to colour the individual pixels
        var dotter = image.getContext('2d').createImageData(1, 1);

        // Colour the black pixesl.
        dotter.data[0] = 0;
        dotter.data[1] = 0;
        dotter.data[2] = 0;
        dotter.data[3] = 255;
        image.getContext('2d').putImageData(dotter, 0, 0);
        image.getContext('2d').putImageData(dotter, 1, 1);

        // Colour the white pixels.
        dotter.data[0] = 255;
        dotter.data[1] = 255;
        dotter.data[2] = 255;
        dotter.data[3] = 255;
        image.getContext('2d').putImageData(dotter, 1, 0);
        image.getContext('2d').putImageData(dotter, 0, 1);
        return image;
    }

    function drawFillRect(canvas, image, smoothing) {
        var ctx = canvas.getContext('2d');
        var pattern = ctx.createPattern(image, "repeat");
        ctx.fillStyle = pattern;
        ctx.imageSmoothingEnabled = smoothing;
        ctx.scale(10, 10);
        ctx.fillRect(0, 0, canvas.width, canvas.height);
    }

    function drawFill(canvas, image, smoothing) {
        var ctx = canvas.getContext('2d');
        var pattern = ctx.createPattern(image, "repeat");
        ctx.fillStyle = pattern;
        ctx.imageSmoothingEnabled = smoothing;
        ctx.scale(10, 10);
        ctx.beginPath();
        ctx.moveTo(0,0);
        ctx.lineTo(10, 10);
        ctx.lineTo(0, 10);
        ctx.fill();
    }

    function drawStroke(canvas, image, smoothing) {
        var ctx = canvas.getContext('2d');
        var pattern = ctx.createPattern(image, "repeat");
        ctx.strokeStyle = pattern;
        ctx.lineWidth = 5;
        ctx.imageSmoothingEnabled = smoothing;
        ctx.scale(10, 10);
        ctx.beginPath();
        ctx.moveTo(0,0);
        ctx.lineTo(10, 10);
        ctx.stroke();
    }

    function draw() {
        var image = createImage();
        drawFillRect(document.getElementById('unsmoothedFillRect'), image,
            false);
        drawFillRect(document.getElementById('smoothedFillRect'), image,
            true);
        drawFill(document.getElementById('unsmoothedFill'), image,
            false);
        drawFill(document.getElementById('smoothedFill'), image,
            true);
        drawStroke(document.getElementById('unsmoothedStroke'), image,
            false);
        drawStroke(document.getElementById('smoothedStroke'), image,
            true);
    }

  </script>
 </head>
 <body onload="draw()">
   <div>
     <canvas id="unsmoothedFillRect" width="100" height="100"></canvas>
     <canvas id="smoothedFillRect" width = "100" height="100"></canvas>
   </div>
   <div>
     <canvas id="unsmoothedFill" width="100" height="100"></canvas>
     <canvas id="smoothedFill" width = "100" height="100"></canvas>
   </div>
   <div>
     <canvas id="unsmoothedStroke" width="100" height="100"></canvas>
     <canvas id="smoothedStroke" width = "100" height="100"></canvas>
   </div>
 </body>
</html>
chromium/third_party/blink/web_tests/fast/canvas/canvas-imageSmoothingEnabled-patterns.html
