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