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