<body>
<p>This test shows a <code>&lt;canvas></code> element in which we draw the SVG image with the source rectangle set to fit the green rectangle from the SVG image and the destination rectangle as the bounds of the canvas element. In this example, the source <code>&lt;img></code> is in the DOM and is not explicitly sized.</p>
<script type="text/javascript">

if (window.testRunner)
    testRunner.waitUntilDone();

var width = 200;
var height = 200;
var svgData = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><rect width="200" height="200" fill="red" /><rect x="20" y="20" width="40" height="40" fill="green" /></svg>';

var canvas = document.body.appendChild(document.createElement("canvas"));
canvas.width = width;
canvas.height = height;

var image = document.body.appendChild(new Image());
image.src = svgData;
image.style.width = `${width}px`;
image.style.height = `${height}px`;
image.style.visibility = "hidden";

if (image.complete)
    draw();
else
    image.addEventListener("load", draw);

function draw() {
    canvas.getContext("2d").drawImage(image, 20, 20, 40, 40, 0, 0, width, height);
    if (window.testRunner)
        testRunner.notifyDone();
}

</script>
</body>