Data hosted with ♥ by Pastebin.com - Download Raw - See Original
  1. var canvas = document.getElementById('canvas');
  2. var ctx = canvas.getContext('2d');
  3.  
  4. ctx.fillStyle = 'rgb(255,0,0)';
  5.  
  6. //top left
  7. ctx.beginPath();
  8. ctx.mozFillRule = "evenodd";
  9. ctx.arc(75, 75, 75, 0, Math.PI*2, true); //outer counter-clockwise
  10. ctx.arc(75, 75, 25, 0, Math.PI*2, true); //inner counter-clockwise
  11. ctx.fill();
  12. ctx.mozFillRule = "nonzero";
  13. ctx.closePath();
  14.  
  15. //top right
  16. ctx.beginPath();
  17. ctx.mozFillRule = "evenodd";
  18. ctx.arc(275, 75, 75, 0, Math.PI*2, true); //outer counter-clockwise
  19. ctx.arc(275, 75, 25, 0, Math.PI*2, false); //inner clockwise
  20. ctx.fill();
  21. ctx.mozFillRule = "nonzero";
  22. ctx.closePath();
  23.  
  24. //bottom left
  25. ctx.beginPath();
  26. ctx.arc(75, 275, 75, 0, Math.PI*2, true); //outer counter-clockwise
  27. ctx.arc(75, 275, 25, 0, Math.PI*2, true); //inner counter-clockwise
  28. ctx.fill();
  29. ctx.closePath();
  30.  
  31. //bottom right
  32. ctx.beginPath();
  33. ctx.arc(275, 275, 75, 0, Math.PI*2, true); //outer counter-clockwise
  34. ctx.arc(275, 275, 25, 0, Math.PI*2, false); //inner clockwise
  35. ctx.fill();
  36. ctx.closePath();