Как расположить много элементов холста в определенной позиции с помощью цикла

Question

Ниже вы можете видеть, что есть три элемента холста.Я хочу расположить их в горизонтальной линии с промежутком между ними ровно 400 пикселей.Я могу сделать это вручную, но это становится непрактичным, если я хочу нарисовать 100 таких элементов.Как я могу решить проблему с циклом?

let canvas = document.querySelector('canvas');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

let c = canvas.getContext('2d');

c.fillRect(100, 100, 100, 100);
c.fillRect(500, 100, 100, 100);
c.fillRect(900, 100, 100, 100);

Это то, что я пробовал

for (let i = 0; i < 3; i++) {

    c.beginPath();
    let x = 100; // { x = Math.random() * window.innerWidth }  works 
    x = x + 400;
    console.log(x);
    let y = 100;

    c.fillRect(x, y, 100, 100);

}

Все элементы холста будут разделены на 400 пикселей и будут в той же горизонталилиния

Answer 1

Я отвечаю на свой вопрос

for(let x = 100; x < 1000; x += 400) {
    console.log(x);
    c.fillRect(x, 100, 100, 100);
}

, поэтому в начале буква "х" начинается с позиции, которая находится на расстоянии 100 пикселей от левой стороны.Моей целью было нарисовать ровно 3 элемента, поэтому я зацикливаю скрипт до «x <1000», и в каждом цикле x будет увеличивать «400px» от предыдущего значения. </p>

Если я напишу «x<1500 ", тогда я получу 4 цифры, потому что </p>

значение x в

1-й цикл: 100

2-й цикл: 500

3-й цикл:900

4-й цикл: 1300.

...... конец цикла, как в 5-м цикле "x" больше 1500