<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() { if (window.testRunner) testRunner.dumpAsTextWithPixelResults(); 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>