| <body> |
| <p>This test shows a <code><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><img></code> is not in the DOM and is 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 = new Image(width, height); |
| image.src = svgData; |
| |
| if (image.complete) |
| draw(); |
| else |
| image.addEventListener("load", draw); |
| |
| function draw() { |
| var ctx = canvas.getContext("2d"); |
| ctx.imageSmoothingEnabled = false; |
| ctx.drawImage(image, 20, 20, 40, 40, 0, 0, width, height); |
| if (window.testRunner) |
| testRunner.notifyDone(); |
| } |
| |
| </script> |
| </body> |
