javascript - 画布中的多个相同对象 - 不同的大小和位置

Question

我将尝试解释我想要做什么。我正在寻求在一个画布上制作可视化器的帮助，但位置和大小不同。我搜索并尝试了很多方法，但没有任何效果。

我想要这个：在此处输入图像描述 我有这个：在此处输入图像描述

   function drawVisualiser(bufferLength, x, barWidth, barHeight, dataArray){
for (let i = 0; i < bufferLength; i++){
    barHeight = dataArray[i];
    var anticlockwise = i%2==0 ? false : true; // clockwise or anticlockwise
    ctx.save();
    ctx.translate(canvas.width/2, canvas.height/2);
    ctx.rotate(i + 4.184);
    const hue = i * 5;
    ctx.strokeStyle = 'hsl(' + hue + ',100%,' + barHeight/1 + '%)';
    ctx.beginPath();
    ctx.lineTo(0, barHeight/5);
    ctx.arc(95,50,40,0,2*Math.PI, anticlockwise);
    ctx.moveTo(10,10);
    ctx.stroke();
    x += barWidth;
    
    if (i > bufferLength * 0.6){
        ctx.beginPath();
        ctx.rotate(i + 1.184);
        ctx.stroke();
    }
    ctx.restore();
}

}