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.arc(75, 75, 75, 0, Math.PI*2, true); //outer counter-clockwise
  9. ctx.arc(75, 75, 25, 0, Math.PI*2, true); //inner counter-clockwise
  10. ctx.fill("evenodd");
  11. ctx.closePath();
  12.  
  13. //top right
  14. ctx.beginPath();
  15. ctx.arc(275, 75, 75, 0, Math.PI*2, true); //outer counter-clockwise
  16. ctx.arc(275, 75, 25, 0, Math.PI*2, false); //inner clockwise
  17. ctx.fill("evenodd");
  18. ctx.closePath();
  19.  
  20. //bottom left
  21. ctx.beginPath();
  22. ctx.arc(75, 275, 75, 0, Math.PI*2, true); //outer counter-clockwise
  23. ctx.arc(75, 275, 25, 0, Math.PI*2, true); //inner counter-clockwise
  24. ctx.fill("nonzero");
  25. ctx.closePath();
  26.  
  27. //bottom right
  28. ctx.beginPath();
  29. ctx.arc(275, 275, 75, 0, Math.PI*2, true); //outer counter-clockwise
  30. ctx.arc(275, 275, 25, 0, Math.PI*2, false); //inner clockwise
  31. ctx.fill("nonzero");
  32. ctx.closePath();