<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>