Zeichnen Sie ein Rautenmuster, das die Oberseite eines Würfels darstellt [geschlossen] ⇐ HTML

[Anonymous]

Ich versuche, einen mehrfarbigen Würfel perspektivisch, ein Minecraft-Logo, auf einer HTML-Leinwand zu erstellen.
Dies ist Teil meines Codes zum Erstellen der Oberseite dieses Würfels:

Code: Select all

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();
}
}
}

In diesem Codeausschnitt habe ich die Farbe Rot für alle Teile dieser Oberseite verwendet (um es einfach zu halten), aber am Ende werde ich unterschiedliche Farben verwenden.
Ich bekomme so etwas (siehe den roten Teil):


Wie Sie sehen können, zeichnet der Code außerhalb der Oberseite des Würfels. Was läuft schief?