Javascript 重复纹理以使用clip（）循环

我有一个纹理，我在剪裁平面上使用

drawImage（）

。但我有一个问题，我不知道当它移动超过纹理的宽度时如何环绕它，所以它会无限循环，出于某种原因它也不会剪辑

我的绘图代码如下所示：

var radius = 120;
var pos = {'x':canvas.width/2,'y':canvas.height/2};
var x = 0;
var offsetX = 0;

function draw() {
    ctx.clearRect(0,0,canvas.width,canvas.height);

    x += 1.1415;  

    ctx.beginPath();
    ctx.arc(pos.x, pos.y, radius, 0, Math.PI * 2, false);
    ctx.closePath();

    ctx.clip();

var scale = (radius * 2) / img.height;

    ctx.drawImage(img, pos.x+x, pos.y, img.width, img.height, pos.x - radius - offsetX * scale, pos.y - radius, img.width * scale, img.height * scale);
    ctx.restore();    

requestAnimationFrame(draw);
}

我在这里创建了一个演示，这样你就可以看到当纹理移动太远时会发生什么，它基本上会消失，我需要它再次循环，而不会在两者之间留下间隙，这样它就可以无缝：

---

绘制纹理位置以使其环绕的最佳方法是什么，我不太明白如何操作。

我现在已经创建了一个无缝循环。我更改的代码如下。更改drawImage上的y将封装整个圆

if (x > img.width) {
    x = 0;
}

ctx.drawImage(img, x, 0, ...);

ctx.drawImage(img, -img.width+x,0, ...);

---

小提琴链接是broken@Kelv.Gonzales修正了由于某些原因，您必须单击“运行”以启动它。它不会突然跳转并重新启动，而是意味着无缝重复，这样您就可以在最后一个字母之后直接看到第一个字母。所以，在某个时刻，你会看到同一个图像两次。我现在已经修改了它。谢谢：）只是好奇你是否知道为什么剪辑似乎没有填满整个圆圈？