var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgb(255,0,0)';
//top left
ctx.beginPath();
ctx.arc(75, 75, 75, 0, Math.PI*2, true); //outer counter-clockwise
ctx.arc(75, 75, 25, 0, Math.PI*2, true); //inner counter-clockwise
ctx.fill("evenodd");
ctx.closePath();
//top right
ctx.beginPath();
ctx.arc(275, 75, 75, 0, Math.PI*2, true); //outer counter-clockwise
ctx.arc(275, 75, 25, 0, Math.PI*2, false); //inner clockwise
ctx.fill("evenodd");
ctx.closePath();
//bottom left
ctx.beginPath();
ctx.arc(75, 275, 75, 0, Math.PI*2, true); //outer counter-clockwise
ctx.arc(75, 275, 25, 0, Math.PI*2, true); //inner counter-clockwise
ctx.fill("nonzero");
ctx.closePath();
//bottom right
ctx.beginPath();
ctx.arc(275, 275, 75, 0, Math.PI*2, true); //outer counter-clockwise
ctx.arc(275, 275, 25, 0, Math.PI*2, false); //inner clockwise
ctx.fill("nonzero");
ctx.closePath();