Tenho uma tela com uma imagem grande no fundo e uma imagem redonda menor na frente. Eu consegui esse efeito de imagem redonda usando um clipe assim

ctx.save();

ctx.beginPath();
ctx.arc(x,y,r,0,Math.PI*2, true);   
ctx.closePath();
ctx.clip();

ctx.drawImage(img,x-r,y-r,2*r,2*r);     // draw the image
ctx.restore();

Quando eu quero girar a imagem redonda, então eu uso um segundo contexto e giro e redesenho como assim

backCanvas=document.createElement('canvas');    
backContext=backCanvas.getContext('2d');
backCanvas.width=w;
backCanvas.height=h;

backContext.translate(w/2,h/2);
backContext.rotate(a);

backContext.drawImage(img,-w/2,-h/2,w,h);

var imgData=backContext.getImageData(0,0,w,h);

ctx.save();

ctx.beginPath();
ctx.arc(x,y,r,0,Math.PI*2, true);   
ctx.closePath();
ctx.clip();
ctx.putImageData(imgData,x,y);

ctx.restore();

Mas o que acontece é que o fundo transparente preto é copiado da tela de trás e o clipe falha em "cortá-lo"

Qualquer ajuda seria apreciad