OLD | NEW |
1 <html> | 1 <html> |
2 <head> | 2 <head> |
3 <title>A canvas globalCompositeOperation example</title> | 3 <title>A canvas globalCompositeOperation example</title> |
4 <meta name="DC.creator" content="Kamiel Martinet, http://www.martinet.nl/"> | 4 <meta name="DC.creator" content="Kamiel Martinet, http://www.martinet.nl/"> |
5 <meta name="DC.publisher" content="Mozilla Developer Center, http://develope
r.mozilla.org"> | 5 <meta name="DC.publisher" content="Mozilla Developer Center, http://develope
r.mozilla.org"> |
6 <script type="application/x-javascript"> | 6 <script type="application/x-javascript"> |
7 if (window.testRunner) | 7 if (window.testRunner) |
8 testRunner.dumpAsTextWithPixelResults(); | 8 testRunner.dumpAsTextWithPixelResults(); |
9 | 9 |
10 var compositeTypes = [ | 10 var compositeTypes = [ |
11 'source-over','source-in','source-out','source-atop', | 11 'source-over','source-in','source-out','source-atop', |
12 'destination-over','destination-in','destination-out','destination-atop'
, | 12 'destination-over','destination-in','destination-out','destination-atop'
, |
13 'lighter','darker','copy','xor' | 13 'lighter','copy','xor' |
14 ]; | 14 ]; |
15 function draw(){ | 15 function draw(){ |
16 for (i=0;i<compositeTypes.length;i++){ | 16 for (i=0;i<compositeTypes.length;i++){ |
17 var label = document.createTextNode(compositeTypes[i]); | 17 var label = document.createTextNode(compositeTypes[i]); |
18 document.getElementById('lab'+i).appendChild(label); | 18 document.getElementById('lab'+i).appendChild(label); |
19 var ctx = document.getElementById('tut'+i).getContext('2d'); | 19 var ctx = document.getElementById('tut'+i).getContext('2d'); |
20 | 20 |
21 // draw rectangle | 21 // draw rectangle |
22 ctx.fillStyle = "#09f"; | 22 ctx.fillStyle = "#09f"; |
23 ctx.fillRect(15,15,70,70); | 23 ctx.fillRect(15,15,70,70); |
(...skipping 29 matching lines...) Expand all Loading... |
53 <tr> | 53 <tr> |
54 <td><canvas id="tut4" width="125" height="125"></canvas><br/><label id
="lab4"></label></td> | 54 <td><canvas id="tut4" width="125" height="125"></canvas><br/><label id
="lab4"></label></td> |
55 <td><canvas id="tut5" width="125" height="125"></canvas><br/><label id
="lab5"></label></td> | 55 <td><canvas id="tut5" width="125" height="125"></canvas><br/><label id
="lab5"></label></td> |
56 <td><canvas id="tut6" width="125" height="125"></canvas><br/><label id
="lab6"></label></td> | 56 <td><canvas id="tut6" width="125" height="125"></canvas><br/><label id
="lab6"></label></td> |
57 <td><canvas id="tut7" width="125" height="125"></canvas><br/><label id
="lab7"></label></td> | 57 <td><canvas id="tut7" width="125" height="125"></canvas><br/><label id
="lab7"></label></td> |
58 </tr> | 58 </tr> |
59 <tr> | 59 <tr> |
60 <td><canvas id="tut8" width="125" height="125"></canvas><br/><label id
="lab8"></label></td> | 60 <td><canvas id="tut8" width="125" height="125"></canvas><br/><label id
="lab8"></label></td> |
61 <td><canvas id="tut9" width="125" height="125"></canvas><br/><label id
="lab9"></label></td> | 61 <td><canvas id="tut9" width="125" height="125"></canvas><br/><label id
="lab9"></label></td> |
62 <td><canvas id="tut10" width="125" height="125"></canvas><br/><label i
d="lab10"></label></td> | 62 <td><canvas id="tut10" width="125" height="125"></canvas><br/><label i
d="lab10"></label></td> |
63 <td><canvas id="tut11" width="125" height="125"></canvas><br/><label i
d="lab11"></label></td> | |
64 </tr> | 63 </tr> |
65 </table> | 64 </table> |
66 </div> | 65 </div> |
67 </body> | 66 </body> |
68 </html> | 67 </html> |
OLD | NEW |