| 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 |