OLD | NEW |
| (Empty) |
1 <!DOCTYPE html> | |
2 <style> | |
3 canvas { | |
4 display: block; | |
5 position: fixed; | |
6 left: 0px; | |
7 top: 0px; | |
8 right: 0px; | |
9 bottom: 0px; | |
10 border: none; | |
11 width: 100px; | |
12 height: 100px; | |
13 margin: 0px; | |
14 padding: 0px; | |
15 image-rendering: -webkit-optimize-contrast; | |
16 } | |
17 </style> | |
18 <body> | |
19 <!-- The resulting image should be 100x100, consisting of 4 50x50 blocks of
solid color, with no blurring of edges --> | |
20 <canvas width="2" height="2"></canvas> | |
21 </body> | |
22 <script> | |
23 if (window.testRunner) | |
24 testRunner.dumpAsTextWithPixelResults(); | |
25 | |
26 var canvas; | |
27 var imageHandle; | |
28 canvas = document.getElementsByTagName("canvas")[0].getContext("2d"); | |
29 canvas.width = 2; | |
30 canvas.height = 2; | |
31 imageHandle = canvas.createImageData(2, 2); | |
32 | |
33 var index = 0; | |
34 var length = imageHandle.data.length; | |
35 | |
36 imageHandle.data[index++] = 255; | |
37 imageHandle.data[index++] = 0; | |
38 imageHandle.data[index++] = 0; | |
39 imageHandle.data[index++] = 255; | |
40 | |
41 imageHandle.data[index++] = 0; | |
42 imageHandle.data[index++] = 255; | |
43 imageHandle.data[index++] = 0; | |
44 imageHandle.data[index++] = 255; | |
45 | |
46 imageHandle.data[index++] = 0; | |
47 imageHandle.data[index++] = 0; | |
48 imageHandle.data[index++] = 255; | |
49 imageHandle.data[index++] = 255; | |
50 | |
51 imageHandle.data[index++] = 0; | |
52 imageHandle.data[index++] = 0; | |
53 imageHandle.data[index++] = 0; | |
54 imageHandle.data[index++] = 255; | |
55 | |
56 canvas.putImageData(imageHandle, 0, 0); | |
57 </script> | |
OLD | NEW |