Как можно вместо построения одной фигуры в разных точках одной линии организовать построение нескольких одинаковых фигур расположенных, на заданном расстоянии друг от друга и на одной линии,
методом ЦИКЛА (например)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body style= "margin": 0;>
<p>Геометрические фигуры </p>
<canvas id="canvas" </canvas>
<script>
var
canv = document.getElementById(`canvas`),
ctx = canv.getContext(`2d`); // рисуем в 2d
canv.width = window.innerWidth;
canv.height = window.innerWidth;
//Code Вывод надписей
ctx.fillStyle = `mageta`; //цвет
//ctx.font = `20px Georgia`; // пиксели, название шрифта
ctx.font = `bold 20px Georgia`; // пиксели, название жирного шрифта
ctx.fillText("Копирование фигуры", 100, 20);
// Рисуем ромб
var arr = [50, 150, 250, 350, 450, 550];
console.log(arr); // вывод в консоль массива
console.log(arr[2]); // значение третьего элемента массива
console.log(arr.length); // количество элементов в массиве
ctx.fillStyle = `red`; //цвет внутри
ctx.lineWidth = 1 //толщина линии
ctx.scale(2, 3); // изменение размеров фигуры путём растягивания и сжатия
ctx.rotate(10 * Math.PI/180); // поворот фигуры на 10 градусов
// РОМБ №0
var x0 = arr[0] // координата x положения фигуры
console.log(x0); // вывод в консоль первого элемента массива
ctx.beginPath();
ctx.moveTo(x0, 25);
ctx.lineTo(x0 + 25, 50);
ctx.lineTo(x0 + 0, 75);
ctx.lineTo(x0 + -25, 50);
ctx.lineTo(x0, 25);
ctx.stroke();
// РОМБ №1
var x1 = arr[1] // координата x положения фигуры
console.log(x1); // вывод в консоль ВТОРОГО элемента массива
ctx.beginPath();
ctx.moveTo(x1, 25);
ctx.lineTo(x1 + 25, 50);
ctx.lineTo(x1 + 0, 75);
ctx.lineTo(x1 + -25, 50);
ctx.lineTo(x1, 25);
ctx.stroke();
// РОМБ №2
var x2 = arr[2] // координата x положения фигуры
console.log(x2); // вывод в консоль ТРЕТЬЕГО элемента массива
ctx.beginPath();
ctx.moveTo(x2, 25);
ctx.lineTo(x2 + 25, 50);
ctx.lineTo(x2 + 0, 75);
ctx.lineTo(x2 + -25, 50);
ctx.lineTo(x2, 25);
ctx.stroke();
</script>
</body>
</html>