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

想在 arc中画一张图，用了createPattern这个填充图案的方法后，

1、当我在arc的xy坐标处变动的话，createPattern填充的图案也会跟着移动，为什么？

2、如何将createPattern填充的图案做到与在css中一样将图的宽度100%填充到相对应的的矩形中？

如图示例：

Title

*{

margin:0;

padding:0;

}

canvas{

border:1px solid #d03;

}

div{

position: fixed;

top:100px;

left:1000px;

width:200px;

height:200px;

border-radius: 50%;

overflow: hidden;

}

div img{

width:100%;

height: 100%;

}

var rc = document.getElementById('runCircle');

var rc2 = rc.getContext('2d');

rc.width = document.body.clientWidth;

rc.height = window.screen.availHeight ;

let drawImg = new Image();

// drawImg.crossOrigin = "Anonymous";

drawImg.src = "https://sfault-image.b0.upaiyun.com/255/338/2553383630-57f682a80e43e_articlex";

drawImg.onload = function(){

var imgContext = rc2.createPattern(drawImg,"repeat");

rc2.arc(parseInt(rc.width/2 - 100),rc.height/2,200,0,Math.PI*2); // xy 居中 但是图案xy也会移动

rc2.fillStyle = imgContext;

rc2.fill();

};