Нарисуйте ромбовидный узор, представляющий верхнюю грань куба. ⇐ Html

[Anonymous]

Я пытаюсь создать разноцветный куб в перспективе, логотип Minecraft, на холсте HTML.
Это часть моего кода для создания верхней грани этого куба:

Код: Выделить всё

for (let i = 0; i < 16; ++i) {
ctx.fillStyle = "#e92929ff";
var temp = i;

for (let j = 0; j < 16; j++) {
for (let z = 0; z < j + 1; z++) {
ctx.beginPath();
ctx.moveTo(180 + x - i * 12 + 12 * j, 91 + y - (i + z) * 6); //left
ctx.lineTo(192 + x - i * 12 + 12 * j, 85 + y - (i + z) * 6); //top
ctx.lineTo(204 + x - i * 12 + 12 * j, 91 + y - (i + z) * 6); //right
ctx.lineTo(192 + x - i * 12 + 12 * j, 97 + y - (i + z) * 6); //bottom
ctx.closePath();
ctx.fill();
}
}
}

В этом фрагменте кода я использовал красный цвет для всех частей верхней грани (чтобы было проще), но в итоге я буду использовать разные цвета.
У меня получилось вот что (посмотрите на красную часть):


Как видите, код рисуется за пределами верхней грани куба. Что происходит не так?

Подробнее здесь: https://stackoverflow.com/questions/798 ... -of-a-cube