| OLD | NEW | 
|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> | 
| 2 <title>Canvas.drawImage with SVG image</title> | 2 <title>Canvas.drawImage with SVG image</title> | 
| 3 <canvas width="300" height="300"></canvas> | 3 <canvas width="300" height="300"></canvas> | 
| 4 <script> | 4 <script> | 
| 5   function createSVGImage() { | 5   function createSVGImage() { | 
| 6       var image = document.createElement('img'); | 6       var image = document.createElement('img'); | 
| 7       image.style.width = "5px"; | 7       image.style.width = "5px"; | 
| 8       image.src = "data:image/svg+xml," + | 8       image.src = "data:image/svg+xml," + | 
| 9                   "<svg xmlns='http://www.w3.org/2000/svg' width='200' viewBox='
    0 0 1 1'>" + | 9                   "<svg xmlns='http://www.w3.org/2000/svg' width='200' viewBox='
    0 0 1 1'>" + | 
| 10                   "<rect width='1' height='1' fill='green'/></svg>"; | 10                   "<rect width='1' height='1' fill='green'/></svg>"; | 
| 11       image.onload = function() { |  | 
| 12           var canvas = document.querySelector('canvas'); |  | 
| 13           var ctx = canvas.getContext("2d"); |  | 
| 14           ctx.drawImage(document.querySelector('img'), 0, 0); |  | 
| 15           document.body.removeChild(document.querySelector('img')); |  | 
| 16       }; |  | 
| 17       return image; | 11       return image; | 
| 18   } | 12   } | 
| 19   document.body.appendChild(createSVGImage()); | 13   document.body.appendChild(createSVGImage()); | 
| 20   document.body.offsetTop; // Force layout | 14   document.body.offsetTop; // Force layout | 
| 21 | 15   var canvas = document.querySelector('canvas'); | 
|  | 16   var ctx = canvas.getContext("2d"); | 
|  | 17   ctx.drawImage(document.querySelector('img'), 0, 0); | 
|  | 18   document.body.removeChild(document.querySelector('img')); | 
| 22 </script> | 19 </script> | 
| OLD | NEW | 
|---|