100 lines
3.1 KiB
HTML
100 lines
3.1 KiB
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() {
|
|
if (window.testRunner)
|
|
testRunner.dumpAsText(true);
|
|
|
|
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>
|