I will try to explain what I wish to make. I'm looking for help in making a visualiser on one canvas but in different positions and sizes. I searched and tried many ways, but nothing works.

I want this : enter image description here I have this : enter image description here

   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();
}

}