canvas 中怎么对旋转过的图片进行部分截取显示。

Question

现在遇到这样一个问题。先上代码
var xpos = 300;
var ypos = 200;
ctx.save();
ctx.translate(xpos, ypos);
ctx.rotate( Math.PI / 12);
ctx.translate(-xpos, -ypos);
ctx.drawImage(myImage, 0 ,0 ,30,30,xpos - myImage.width / 2, ypos - myImage.height / 2,50,50);
ctx.restore();

我用的图片大小是50*50的现在想实现的效果是把这张图片旋转30度以后，在旋转好的图片上截取0到30的距离然后再显示出来。但是上面这段代码是先把图片截取0-30的部分然后才旋转30。不是我想实现的效果。
如果实现我想要的效果应该怎么做。请不要用把这张图片画在一个30*30的canvas上然后把这个canvas转化成图片的src这种方式来实现。这种方式的效率太低了。我要频繁的进行操作。哪位大神能帮帮忙