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