OLD | NEW |
---|---|
(Empty) | |
1 <html> | |
2 <body> | |
3 <script> | |
4 if (window.testRunner) | |
5 window.testRunner.waitUntilDone(); | |
6 | |
7 // Create auxiliary canvas to draw to and create an image from. | |
Stephen White
2013/07/25 18:01:07
Grammar nit: ending a sentence with a preposition
| |
8 var aCanvas = document.createElement('canvas'); | |
9 aCanvas.setAttribute('width', '100'); | |
10 aCanvas.setAttribute('height', '100'); | |
11 var aCtx = aCanvas.getContext('2d'); | |
12 aCtx.fillStyle = 'green'; | |
13 aCtx.fillRect(0, 0, 200, 200); | |
14 | |
15 var bCanvas = document.createElement('canvas'); | |
16 bCanvas.setAttribute('width', '100'); | |
17 bCanvas.setAttribute('height', '100'); | |
18 var bCtx = bCanvas.getContext('2d'); | |
19 bCtx.fillStyle = 'red'; | |
20 bCtx.fillRect(0, 0, 200, 200); | |
21 | |
22 var canvas = document.createElement('canvas'); | |
23 canvas.setAttribute('width', '400'); | |
24 canvas.setAttribute('height', '300'); | |
25 var ctx = canvas.getContext('2d'); | |
26 document.body.appendChild(canvas); | |
27 | |
28 var image = new Image(); | |
29 image.onload = imageLoaded; | |
30 image.src = aCanvas.toDataURL(); // set a data URI of the base64 enconded image as the source | |
Stephen White
2013/07/25 18:01:07
Nit: enconded. Also, no punctuation
| |
31 | |
32 var d; | |
33 | |
34 function imageLoaded() { | |
35 d = aCtx.getImageData(0, 0, 100, 100); | |
36 createImageBitmap(image, callback('Image')); | |
37 createImageBitmap(d, callback('Data')); | |
38 createImageBitmap(aCanvas, callback('Canvas')); | |
39 } | |
40 | |
41 var imageBitmapImage, imageBitmapData, imageBitmapCanvas; | |
42 var i = 0; | |
43 function callback(name) { | |
44 var name = name; | |
45 return function(imageBitmap) { | |
46 switch(name) { | |
47 case 'Image': | |
48 imageBitmapImage = imageBitmap; | |
49 image.onload = draw(imageBitmapImage); | |
50 image.src = bCanvas.toDataURL(); | |
51 createImageBitmap(imageBitmapImage, callback('ImageBitmapImage')); | |
52 break; | |
53 case 'Data': | |
54 imageBitmapData = imageBitmap; | |
55 d = 0; | |
56 ctx.drawImage(imageBitmapData, 110, 0); | |
57 createImageBitmap(imageBitmapData, callback('ImageBitmapData')); | |
58 checkIfDone(); | |
59 break; | |
60 case 'Canvas': | |
61 imageBitmapCanvas = imageBitmap; | |
62 aCtx.clearRect(0, 0, 100, 100); | |
63 ctx.drawImage(imageBitmapCanvas, 220, 0); | |
64 createImageBitmap(imageBitmapCanvas, callback('ImageBitmapCanvas')); | |
65 checkIfDone(); | |
66 break; | |
67 case 'ImageBitmapImage': | |
68 imageBitmapImage = 0; | |
69 ctx.drawImage(imageBitmap, 0, 110); | |
70 checkIfDone(); | |
71 break; | |
72 case 'ImageBitmapData': | |
73 d = 0; | |
74 imageBitmapData = 0; | |
75 ctx.drawImage(imageBitmap, 110, 110); | |
76 checkIfDone(); | |
77 break; | |
78 case 'ImageBitmapCanvas': | |
79 aCtx.clearRect(0, 0, 100, 100); | |
80 imageBitmapCanvas = 0; | |
81 ctx.drawImage(imageBitmap, 220, 110); | |
82 checkIfDone(); | |
83 break; | |
84 } | |
85 } | |
86 } | |
87 | |
88 function draw(imageBitmap) { | |
89 ctx.drawImage(imageBitmap, 0, 0); | |
90 checkIfDone(); | |
91 } | |
92 | |
93 function checkIfDone() { | |
94 if (++i == 6 && window.testRunner) | |
95 window.testRunner.notifyDone(); | |
96 } | |
97 | |
98 </script> | |
99 <p>There should be 6 green squares displayed in a 2 row by 3 column grid.</p> | |
100 </body> | |
101 </html> | |
OLD | NEW |