24-итерационный цикл JavaScript показывает только 10 холстов

Question

Я хотел бы создать 24 холста, но на странице отображается только 10.Я не могу использовать всю ширину и не могу понять, почему.Вот фрагмент кода, иллюстрирующий мой пример: https://jsfiddle.net/bLr83jyn/2/

var colors = ['blue', 'green', 'yellow', 'orange', 'red', 'purple'];

function MakeCanvas(x, y, w, h, color) {
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  ctx.fillStyle = color;
  ctx.fillRect(x, y, w, h);
}

var x = 0;
var y = 0;
var w = 30;
var h = w * 1.5;
var offset = w;

for (var i = 0; i < 24; i++) {
  MakeCanvas(x, y, w, h, colors[i % colors.length]);
  x = x + offset;
}

<canvas id="canvas"></canvas>

Есть идеи, что случилось?

Answer 1

Вы не указали размер для холста, поэтому он использует размер по умолчанию 300 x 150. Таким образом, к тому времени, как вы визуализировали 10 прямоугольников, вы израсходовали все 300 пикселей ширины ивсе остальные отрисовываются за пределами холста

Если вы хотите увеличить холст, вы можете добавить свойства к элементу холста.Например:

var colors = ['blue', 'green', 'yellow', 'orange', 'red', 'purple'];

function MakeCanvas(x, y, w, h, color) {
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  ctx.fillStyle = color;
  ctx.fillRect(x, y, w, h);
}

var x = 0;
var y = 0;
var w = 30;
var h = w * 1.5;
var offset = w;

for (var i = 0; i < 24; i++) {
  MakeCanvas(x, y, w, h, colors[i % colors.length]);
  x = x + offset;
}

    <canvas id="canvas" width="600" height="300"></canvas>

Этот позволит вам уместить 20 прямоугольников шириной 30 пикселей, прежде чем закончится свободное место.Кроме того, вы можете визуализировать меньшие прямоугольники.Все зависит от того, что вы пытаетесь сделать.