| OLD | NEW |
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <title>drawImage() with SVG fragments</title> | 2 <title>drawImage() with SVG fragments</title> |
| 3 <script> | 3 <script> |
| 4 var newImages = [undefined, undefined, undefined]; |
| 5 var newImagesLoadedCount = 0; |
| 6 function imageOnLoad() { |
| 7 newImagesLoadedCount++; |
| 8 if (newImagesLoadedCount == 3) { |
| 9 var context = document.getElementsByTagName('canvas')[0].getContext(
'2d'); |
| 10 for (var i = 0; i < newImages.length; i++) { |
| 11 context.drawImage(newImages[i], i*60, i*60, 120, 120); |
| 12 } |
| 13 } |
| 14 } |
| 4 onload = function() { | 15 onload = function() { |
| 5 var context = document.getElementsByTagName('canvas')[0].getContext('2d'
); | |
| 6 var images = document.getElementsByTagName('img'); | 16 var images = document.getElementsByTagName('img'); |
| 7 for (var i = 0; i < images.length; i++) { | 17 for (var i = 0; i < images.length; i++) { |
| 8 var newImage = new Image(); | 18 newImages[i] = new Image(); |
| 9 newImage.src = images[i].src; | 19 newImages[i].onload = imageOnLoad; |
| 10 context.drawImage(newImage, i*60, i*60, 120, 120); | 20 newImages[i].src = images[i].src; |
| 11 } | 21 } |
| 12 while (images.length) | 22 while (images.length) |
| 13 document.body.removeChild(images.item(0)); | 23 document.body.removeChild(images.item(0)); |
| 14 } | 24 } |
| 15 </script> | 25 </script> |
| 16 <canvas width="240" height="240"></canvas> | 26 <canvas width="240" height="240"></canvas> |
| 17 <img src="../css/resources/fragment-identifiers.svg#green"> | 27 <img src="../css/resources/fragment-identifiers.svg#green"> |
| 18 <img src="../css/resources/fragment-identifiers.svg#red"> | 28 <img src="../css/resources/fragment-identifiers.svg#red"> |
| 19 <img src="../css/resources/fragment-identifiers.svg#blue"> | 29 <img src="../css/resources/fragment-identifiers.svg#blue"> |
| OLD | NEW |