js的canvas中将图像填充至矩形内的问题？

想在 arc中画一张图，用了createPattern这个填充图案的方法后，
1、当我在arc的xy坐标处变动的话，createPattern填充的图案也会跟着移动，为什么？
2、如何将createPattern填充的图案做到与在css中一样将图的宽度100%填充到相对应的的矩形中？
如图示例：