evenodd-fill-2.html 438 B

1234567891011121314151617181920
  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. window.onload = function() {
  5. var ctx = document.getElementById("c1").getContext("2d");
  6. ctx.mozFillRule = "evenodd";
  7. ctx.rect(50, 50, 200, 200);
  8. ctx.rect(100, 100, 100, 100);
  9. ctx.clip();
  10. ctx.beginPath();
  11. ctx.fillRect(0, 0, 300, 300);
  12. }
  13. </script>
  14. </head>
  15. <body>
  16. <div><canvas id="c1" width="300" height="300"></canvas></div>
  17. </body>
  18. </html>