HTML5 Canvas - 用图像填充圆圈

如何在圆内绘制图像？如果我做：

context.beginPath();
context.arc((e.pageX),(e.pageY),161,0,Math.PI*2,true);
context.closePath();

然后我如何使用 fill() 用我绘制的图像填充它？

前几天我这样做是为了我正在做的一件大事；

var thumbImg = document.createElement('img');

thumbImg.src = 'path_to_image';
thumbImg.onload = function() {
    tmpCtx.save();
    tmpCtx.beginPath();
    tmpCtx.arc(25, 25, 25, 0, Math.PI * 2, true);
    tmpCtx.closePath();
    tmpCtx.clip();

    tmpCtx.drawImage(thumbImg, 0, 0, 50, 50);

    tmpCtx.beginPath();
    tmpCtx.arc(0, 0, 25, 0, Math.PI * 2, true);
    tmpCtx.clip();
    tmpCtx.closePath();
    tmpCtx.restore();
};

对我来说非常完美。

这是我制作的一个更复杂的版本，它也可以进行图像缓存，https://jsfiddle.net/jaredwilli/ex5n5/ https://jsfiddle.net/jaredwilli/ex5n5/