| OLD | NEW |
| 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" | 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" |
| 2 "http://www.w3.org/TR/html4/loose.dtd"> | 2 "http://www.w3.org/TR/html4/loose.dtd"> |
| 3 <html> | 3 <html> |
| 4 <head> | 4 <head> |
| 5 <script> | 5 <script> |
| 6 function debug(str) { | 6 function debug(str) { |
| 7 var c = document.getElementById('console') | 7 var c = document.getElementById('console') |
| 8 c.appendChild(document.createTextNode(str + '\n')); | 8 c.appendChild(document.createTextNode(str + '\n')); |
| 9 } | 9 } |
| 10 | 10 |
| 11 var numErrs = 0; | 11 var numErrs = 0; |
| 12 | 12 |
| 13 function getContext(id) { | 13 function getContext(id) { |
| 14 return document.getElementById(id).getContext('2d'); | 14 return document.getElementById(id).getContext('2d'); |
| 15 } | 15 } |
| 16 | 16 |
| 17 function imageLoaded() { | 17 function imageLoaded() { |
| 18 var c1 = getContext('canvas1') | 18 var c1 = getContext('canvas1') |
| 19 c1.drawImage(i, 0, 0, i.width * 2, i.height * 2) | 19 c1.drawImage(i, 0, 0, i.width * 2, i.height * 2) |
| 20 | 20 |
| 21 var c2 = getContext('canvas2'); | 21 var c2 = getContext('canvas2'); |
| 22 c2.drawImageFromRect(i, 0, 0, i.width, i.height, 0, 0, i.width, i.height, 'o
ver') | 22 c2.drawImage(i, 0, 0, i.width, i.height, 0, 0, i.width, i.height) |
| 23 | 23 |
| 24 var c3 = getContext('canvas3'); | 24 var c3 = getContext('canvas3'); |
| 25 var pattern = c3.createPattern(i, 'repeat'); | 25 var pattern = c3.createPattern(i, 'repeat'); |
| 26 c3.fillStyle = pattern; | 26 c3.fillStyle = pattern; |
| 27 c3.arc(75, 75, 60, 0, 2*Math.PI, 0); | 27 c3.arc(75, 75, 60, 0, 2*Math.PI, 0); |
| 28 c3.fill(); | 28 c3.fill(); |
| 29 | 29 |
| 30 var c4 = getContext('canvas4'); | 30 var c4 = getContext('canvas4'); |
| 31 var pattern = c4.createPattern(i, 'no-repeat'); | 31 var pattern = c4.createPattern(i, 'no-repeat'); |
| 32 c4.fillStyle = pattern; | 32 c4.fillStyle = pattern; |
| (...skipping 16 matching lines...) Expand all Loading... |
| 49 i = new Image(); | 49 i = new Image(); |
| 50 i.onload = imageLoaded; | 50 i.onload = imageLoaded; |
| 51 i.src = 'resources/apple.gif'; | 51 i.src = 'resources/apple.gif'; |
| 52 } | 52 } |
| 53 | 53 |
| 54 </script> | 54 </script> |
| 55 </head> | 55 </head> |
| 56 <body onload="runTests();" style="overflow:hidden;"> | 56 <body onload="runTests();" style="overflow:hidden;"> |
| 57 <p>This tests that the Image JavaScript object works as expected when used in a
canvas. If the test is successful, the Apple logo should appear scaled, normal a
nd finally tiled in a circle.</p> | 57 <p>This tests that the Image JavaScript object works as expected when used in a
canvas. If the test is successful, the Apple logo should appear scaled, normal a
nd finally tiled in a circle.</p> |
| 58 <div><canvas id="canvas1" width="150" height="150"></canvas>Using drawImage.</di
v> | 58 <div><canvas id="canvas1" width="150" height="150"></canvas>Using drawImage.</di
v> |
| 59 <div><canvas id="canvas2" width="150" height="150"></canvas>Using drawImageFromR
ect.</div> | 59 <div><canvas id="canvas2" width="150" height="150"></canvas>Using drawImage with
source rectangle.</div> |
| 60 <div><canvas id="canvas3" width="150" height="150"></canvas>Using ImagePattern.<
/div> | 60 <div><canvas id="canvas3" width="150" height="150"></canvas>Using ImagePattern.<
/div> |
| 61 <div><canvas id="canvas4" width="150" height="150"></canvas>Using ImagePattern a
nd rotation.</div> | 61 <div><canvas id="canvas4" width="150" height="150"></canvas>Using ImagePattern a
nd rotation.</div> |
| 62 | 62 |
| 63 <pre id="console"> | 63 <pre id="console"> |
| 64 </pre> | 64 </pre> |
| 65 </body> | 65 </body> |
| 66 </html> | 66 </html> |
| OLD | NEW |