| <body> |
| <canvas id="canvas" width="100" height="100"> |
| <script> |
| const canvas = document.getElementById("canvas"); |
| const ctx = canvas.getContext("2d"); |
| |
| const { width, height } = canvas; |
| ctx.fillStyle = "red"; |
| ctx.fillRect(0, 0, width, height); |
| |
| function drawImage(image, scale) { |
| ctx.save(); |
| |
| ctx.scale(1 / scale, 1 / scale); |
| ctx.drawImage(image, 0, 0, 1000, 1000, 0, 0, width * scale, height * scale); |
| |
| ctx.restore(); |
| } |
| |
| if (window.testRunner) |
| testRunner.waitUntilDone(); |
| |
| const image = new Image(); |
| image.onload = (() => { |
| drawImage(image, 500); |
| if (window.testRunner) |
| testRunner.notifyDone(); |
| }); |
| image.src = `data:image/svg+xml, |
| <svg xmlns='http://www.w3.org/2000/svg' width='1000' height='1000'> |
| <rect width='1000' height='1000' fill='green'/> |
| </svg>`; |
| </script> |
| </body> |
