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