third_party/WebKit/LayoutTests/fast/canvas/canvas-composite.html

   1 <html>
   2   <head>
   3     <title>A canvas globalCompositeOperation example</title>
   4     <meta name="DC.creator" content="Kamiel Martinet, http://www.martinet.nl/">
   5     <meta name="DC.publisher" content="Mozilla Developer Center, http://developer.mozilla.org">
   6     <script type="application/x-javascript">
   7       if (window.testRunner)
   8             testRunner.dumpAsTextWithPixelResults();
   9
  10       var compositeTypes = [
  11         'source-over','source-in','source-out','source-atop',
  12         'destination-over','destination-in','destination-out','destination-atop',
  13         'lighter','copy','xor'
  14       ];
  15       function draw(){
  16         for (i=0;i<compositeTypes.length;i++){
  17           var label = document.createTextNode(compositeTypes[i]);
  18           document.getElementById('lab'+i).appendChild(label);
  19           var ctx = document.getElementById('tut'+i).getContext('2d');
  20
  21           // draw rectangle
  22           ctx.fillStyle = "#09f";
  23           ctx.fillRect(15,15,70,70);
  24
  25           // set composite property
  26           ctx.globalCompositeOperation = compositeTypes[i];
  27
  28           // draw circle
  29           ctx.fillStyle = "#f30";
  30           ctx.beginPath();
  31           ctx.arc(75,75,35,0,Math.PI*2,true);
  32           ctx.fill();
  33         }
  34       }
  35     </script>
  36     <style type="text/css">
  37       body { margin: 20px; font-family: arial,verdana,helvetica; background: #fff;}
  38       h1 { font-size: 140%; font-weight:normal; color: #036; border-bottom: 1px solid #ccc; }
  39       canvas { border: 2px solid #000; margin-bottom: 5px; }
  40       td { padding: 7px; }
  41       pre { float:left; display:block; background: rgb(238,238,238); border: 1px dashed #666; padding: 15px 20px; margin: 0 0 10px 0; }
  42     </style>
  43   </head>
  44   <body onload="draw();">
  45     <div>
  46       <table>
  47         <tr>
  48           <td><canvas id="tut0" width="125" height="125"></canvas><br/><label id="lab0"></label></td>
  49           <td><canvas id="tut1" width="125" height="125"></canvas><br/><label id="lab1"></label></td>
  50           <td><canvas id="tut2" width="125" height="125"></canvas><br/><label id="lab2"></label></td>
  51           <td><canvas id="tut3" width="125" height="125"></canvas><br/><label id="lab3"></label></td>
  52         </tr>
  53         <tr>
  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>
  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>
  58         </tr>
  59         <tr>
  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>
  62           <td><canvas id="tut10" width="125" height="125"></canvas><br/><label id="lab10"></label></td>
  63         </tr>
  64       </table>
  65     </div>
  66   </body>
  67 </html>