var cv = document.getElementById('cv');

var ctx = cv.getContext('2d');

​

function drawShape(cx, cy, d, scale, rotation) {

  ctx.save();

  ctx.translate(cx,cy);

  scale = scale || 1;

  if (scale !=1) ctx.scale(scale, scale);

  rotation = rotation || 0;

  if (rotation) ctx.rotate(rotation);

  // clip with o rectangular hole

  ctx.beginPath();

  var r=d/2; 

  rectPath(-r,-r, d, d);

  revRectPath(-0.25*r,-0.8*r, 0.5*r, 1.6*r);

  ctx.closePath();

  ctx.clip();

  ctx.beginPath();

  // we're clipped !

  ctx.arc(0,0, r, 0, 2*Math.PI);

  ctx.closePath();

  ctx.fill();

  ctx.restore();

}

​

// clockwise sub-path of a rect

function rectPath(x,y,w,h) {

  ctx.moveTo(x,y);

  ctx.lineTo(x+w,y);

  ctx.lineTo(x+w,y+h);

  ctx.lineTo(x,y+h);

}

​

// counter-clockwise sub-path of a rect

function revRectPath(x,y,w,h) {

  ctx.moveTo(x,y);

  ctx.lineTo(x,y+h);

  ctx.lineTo(x+w,y+h);

  ctx.lineTo(x+w,y);  

}

​

​

ctx.fillStyle='#000';

​

drawShape(150,150, 100, 1, -1);

​

drawShape(150,150, 100, 2);

​

​