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