OLD | NEW |
| (Empty) |
1 <canvas id="canvas" width="30" height="30"></canvas> | |
2 <script> | |
3 if (window.testRunner) | |
4 testRunner.dumpAsTextWithPixelResults(); | |
5 | |
6 var img = new Image(); | |
7 // This is a 11x11 black and white grid. | |
8 img.src = 'resources/grid-small.png'; | |
9 | |
10 function drawSubRectScaled(ctx, img, x, y, w, h, scale) | |
11 { | |
12 ctx.drawImage(img, x, y, w, h, x * scale, y * scale, w * scale, h * scale); | |
13 } | |
14 | |
15 img.onload = function() | |
16 { | |
17 // Draw the image into canvas with 8 fragments like shown: | |
18 // | |
19 // | 3.66 x 3.66 | | 3.66 x 3.66 | | 3.66 x 3.66 | | |
20 // | |
21 // | 5.5 x 3.66 | | 5.5 x 3.66 | | |
22 // | |
23 // | 3.66 x 3.66 | | 3.66 x 3.66 | | 3.66 x 3.66 | | |
24 | |
25 var ctx = document.getElementById("canvas").getContext("2d"); | |
26 | |
27 var scale = 30.0 / 11.0; | |
28 | |
29 // Draw the top row. | |
30 drawSubRectScaled(ctx, img, 0, 0, 3.66, 3.66, scale); | |
31 drawSubRectScaled(ctx, img, 3.66, 0, 3.66, 3.66, scale); | |
32 drawSubRectScaled(ctx, img, 7.33, 0, 3.66, 3.66, scale); | |
33 | |
34 // Draw the middle row. | |
35 drawSubRectScaled(ctx, img, 0, 3.66, 5.5, 3.66, scale); | |
36 drawSubRectScaled(ctx, img, 5.5, 3.66, 5.5, 3.66, scale); | |
37 | |
38 // Draw the bottom row. | |
39 drawSubRectScaled(ctx, img, 0, 7.33, 3.66, 3.66, scale); | |
40 drawSubRectScaled(ctx, img, 3.66, 7.33, 3.66, 3.66, scale); | |
41 drawSubRectScaled(ctx, img, 7.33, 7.33, 3.66, 3.66, scale); | |
42 } | |
43 </script> | |
OLD | NEW |