OLD | NEW |
---|---|
(Empty) | |
1 <html> | |
2 <body> | |
3 <canvas id="c1" width="250" height="250"></canvas> | |
4 <canvas id="c2" width="250" height="250"></canvas> | |
5 <br> | |
6 <canvas id="c3" width="250" height="250"></canvas> | |
7 <canvas id="c4" width="250" height="250"></canvas> | |
8 <script type="text/javascript"> | |
9 if (window.testRunner) | |
10 testRunner.waitUntilDone(); | |
11 | |
12 var canvas1 = document.getElementById('c1'); | |
13 var canvas2 = document.getElementById('c2'); | |
14 var canvas3 = document.getElementById('c3'); | |
15 var canvas4 = document.getElementById('c4'); | |
16 var bgcanvas = document.createElement('canvas'); | |
17 bgcanvas.width = 100; | |
18 bgcanvas.height = 100; | |
19 var bgctx = bgcanvas.getContext('2d'); | |
20 bgctx.fillStyle = 'green'; | |
21 bgctx.fillRect(0, 0, bgcanvas.width, bgcanvas.height); | |
22 var greenSquareURL = bgcanvas.toDataURL(); | |
23 var img = new Image(); | |
24 img.onload = imageLoaded; | |
25 img.src = greenSquareURL; | |
26 var ctx1 = canvas1.getContext('2d'); | |
27 var ctx2 = canvas2.getContext('2d'); | |
28 var ctx3 = canvas3.getContext('2d'); | |
29 var ctx4 = canvas4.getContext('2d'); | |
30 | |
31 function imageLoaded() { | |
32 createImageBitmap(img, imageBitmapCallback(ctx1)); | |
33 createImageBitmap(img, imageBitmapCallback(ctx2), -50, -50, 100, 100); | |
34 createImageBitmap(img, imageBitmapCallback(ctx3), 50, 50, 100, 100); | |
35 createImageBitmap(img, imageBitmapCallback(ctx4), -100, -100, 300, 300); | |
36 } | |
37 | |
38 var pending = 0; | |
39 function imageBitmapCallback(ctx) { | |
40 pending++; | |
41 var ctx = ctx; | |
42 return function(imageBitmap) { | |
43 pending--; | |
44 ctx.drawImage(imageBitmap, -100, -100, 300, 300, -25, -25, 300, 300); | |
45 ctx.drawImage(imageBitmap, -100, -100, 200, 200, -25, -25, 100, 100); | |
46 ctx.drawImage(imageBitmap, 0, -100, 100, 200, 75, -25, 100, 100); | |
47 ctx.drawImage(imageBitmap, 0, -100, 200, 200, 175, -25, 100, 100); | |
48 ctx.drawImage(imageBitmap, -100, 0, 200, 100, -25, 75, 100, 100); | |
Stephen White
2013/07/25 18:01:07
Nit: spacing is a bit weird here.
| |
49 ctx.drawImage(imageBitmap, 0, 0, 200, 100, 175, 75, 100, 100); | |
50 ctx.drawImage(imageBitmap, -100, 0, 200, 200, -25, 175, 100, 100); | |
51 ctx.drawImage(imageBitmap, 0, 0, 100, 200, 75, 175, 100, 100); | |
52 ctx.drawImage(imageBitmap, 0, 0, 200, 200, 175, 175, 100, 100); | |
53 if (!pending && window.testRunner) | |
54 testRunner.notifyDone(); | |
55 } | |
56 } | |
57 | |
58 </script> | |
59 </body></html> | |
OLD | NEW |