how to add image inside canvas arc

I want to add image inside arc but image should be moved with arc. Currently I have some code and it's working for repeat but when it put no-repeat argument then it gets blank inside arc.

Here is what I am looking for but the image is not centered properly: Image is a wheel.

Here is the code

canvas = document.createElement('canvas');
ctx = canvas.getContext("2d");
var img = new Image();
img.src = (window.location.origin + window.location.pathname) + 'assets/files/' + (wheel.logoURL);
            img.onload = function() {
                var pattern = ctx.createPattern(img, 'repeat');
                ctx.beginPath();
                ctx.arc(centerX, centerY, 50, 0, PI2, false);
                ctx.closePath();
                ctx.fillStyle = pattern;
                ctx.fill();
                ctx.stroke();
}