如何将图像设置成无重复的圆圈

Question

在我的JS画布中，用“ arc”创建圆。 我想用具有圆圈大小的图像填充这些圆圈。 我怎样才能做到这一点 ？

使用我的代码，我有黑眼圈而不是图像。

draw() {
ctx.save();
switch(this.couleur) {
  case "red":
    boule.src = ImagesBoulesACharger["rouge"];
    break;
  case "green":
    boule.src = ImagesBoulesACharger["vert"];
    break;
  case "orange":
    boule.src = ImagesBoulesACharger["orange"];
    break;
  case "yellow":
    boule.src = ImagesBoulesACharger["jaune"];
    break; 
  case "purple":
    boule.src = ImagesBoulesACharger["violet"];
    break;
}

var pattern = ctx.createPattern(boule, "no-repeat");
ctx.fillStyle = pattern;

//ctx.fillStyle = this.couleur; //A enlever si image
ctx.beginPath();
ctx.arc(this.x, this.y, 15, 0, 2 * Math.PI);
ctx.fill();
ctx.restore();
}