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