Voy a tratar de explicar lo que quiero hacer. Estoy buscando ayuda para hacer un visualizador en un lienzo pero en diferentes posiciones y tamaños. Busqué e intenté de muchas maneras, pero nada funciona.

Quiero esto: ingrese la descripción de la imagen aquí Tengo esto: ingrese la descripción de la imagen aquí

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

}