Hola,
Otra alternativa podría ser trabajar con arrays o con un JSON.
Un JSON suele ser el formato de información que devuelve un servidor mediante un API REST.
Por lo tanto, imagina tener una aplicación que dibuje círculos que estén guardado en una base de datos.
Sería algo como lo siguiente:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>canvas</title>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script>
const circulos = [
{
colors: "blue",
axisX: 300,
axisY: 260,
radio: 30
},
{
colors: "red",
axisX: 300,
axisY: 200,
radio: 30
},
{
colors: "yellow",
axisX: 300,
axisY: 140,
radio: 30
},
{
colors: "black",
axisX: 360,
axisY: 200,
radio: 30
},
{
colors: "orange",
axisX: 240,
axisY: 200,
radio: 30
},
]
var pantalla = document.querySelector("canvas");
var pincel = pantalla.getContext("2d");
pincel.fillStyle = "lightgray";
pincel.fillRect(0, 0, 600, 400);
function dibujarCirculo(x, y, radio, color) {
pincel.fillStyle = color;
pincel.beginPath();
pincel.arc(x, y, radio, 0, 2*3.14);
pincel.fill();
}
function flor(){
circulos.map( (circulo, index) => {
dibujarCirculo(circulo.axisX, circulo.axisY, circulo.radio, circulo.colors)
})
}
flor();
</script>
</body>
</html>