Javascript 如何绘制用户决定的x个圆圈数？

刚开始在javascript中使用画布。一般来说，Javascript也是新的。但到目前为止，它真的很有趣，但在这里和那里有一些问题。。。 所以我想做的是：用户选择要画多少个圆，最多20个。然后画成这样的圆圈。如果用户选择6个圆圈：
O
OO
OOO

到目前为止，我已经创建了用户输入数字的框，以及绘制圆圈的脚本。但是我真的不知道剩下的。。我将感谢任何帮助！如果你想让我发送我的代码，我可以这样做，即使它可能是一团糟。。xD

function draw(max){
  let y = 0, x= 0, perRow = 1;
  while(max--){
    if(x >= perRow){
     y++; perRow++; x = 0;
    }
    drawCircle(x,y);
    x++
  }
}

---

每当用户输入一个数字时，调用draw并定义一个函数drawCircle，该函数在（x | y）处绘制一个圆。

我会将用于计算基本坐标的代码与实际图形的代码分开：

• 首先从左上角生成一个坐标数组，以行数和列数表示：三角形形状的概念是列数永远不会大于行数

• 然后将半径应用于该列表以生成圆心的实际画布坐标，并使用该信息绘制它们：

请在此处尝试：

函数三角坐标（n）{
常量结果=[]；
设y=0，
startX=0；
for（设i=0；iy）{
startX=i；
y++；
}
结果.推送（[i-开始，y]）；
}
返回结果；
}
函数绘图圆（ctx、x、y、半径）{
ctx.beginPath（）；
弧（x，y，半径，0，2*Math.PI）；
ctx.stroke（）；
}
const ctx=canvas.getContext（“2d”），
半径=7，
填充=1；
inputCount.oninput=函数（）{
clearRect（0，0，canvas.width，canvas.height）；
对于（三角形坐标的常数[x，y（+此值））{
绘图圆（ctx，（x*2+1）*（半径+填充），（y*2+1）*（半径+填充），半径）；
}
}

圈数：

您肯定会希望粘贴所有尝试过的代码；这个社区帮助人们在尝试中解决具体问题。它没有编写新的代码实现：）哦，不是经常在这里。我不知道。。谢谢非常感谢！我会尽快尝试的！：）非常感谢！工作完美：）