dom/canvas/test/reftest/clip-multiple-paths.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <canvas id="canvas" width="100" height="100"></canvas>
   5
   6 <script>
   7
   8 var canvas = document.getElementById('canvas');
   9 var ctx = canvas.getContext('2d');
  10
  11 ctx.fillStyle = '#0f0';
  12 ctx.fillRect(0, 0, 100, 100);
  13
  14 ctx.beginPath();
  15 ctx.rect(30, 30, 40, 40);
  16 ctx.clip();
  17
  18 ctx.beginPath();
  19 ctx.arc(50, 50, 25, 0, 2 * Math.PI);
  20 ctx.clip();
  21
  22 ctx.fillStyle = '#f00';
  23
  24 ctx.fillRect(0, 0, 100, 100);
  25
  26 </script>
  27 </body></html>