dom/canvas/test/reftest/clip-multiple-move-1.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.moveTo(100, 30);
  16 ctx.moveTo(30, 30);
  17 ctx.lineTo(30, 70);
  18 ctx.lineTo(70, 70);
  19 ctx.lineTo(70, 30);
  20 ctx.closePath();
  21 ctx.clip();
  22
  23 ctx.fillStyle = '#f00';
  24 ctx.fillRect(0, 0, 100, 100);
  25
  26 </script>
  27 </body></html>