HTML Canvas İle Küp Çizmek

<canvas id="game" width="1280" height="724"></canvas>

<script>
class Kup3D {
    constructor() {
        this.canvas = document.getElementById('game');
        this.context = this.canvas.getContext('2d');
        this.kupAdetX = 3;
        this.kupAdetY = 3;
        this.kupAdetZ = 3;
   
        this.kareBoyut = 150;
    }
 
    init () {
        this.timer = setInterval(this.loop.bind(this), 1000 / 15);
    }
 
    reset() {
        clearInterval(this.timer);
        this.init();
    }
 
    loop() {
        this.draw();
    }
 
    draw() {
        this.context.fillStyle = 'green';
        this.context.fillRect(0, 0, this.canvas.width, this.canvas.height);
   
        for(var x = 0; x < this.kupAdetX; x++)
        {
            for(var y = 0; y < this.kupAdetY; y++)
            {
                for(var z = 0; z < this.kupAdetZ; z++)
                {
                    //küp on yuzu ciz.
                    this.context.beginPath();
                    this.context.strokeStyle  = 'rgba(255, 225, 225, 1)';
                    this.context.rect(100+(x*this.kareBoyut)+(z*50), 200+(y*this.kareBoyut)-(z*30), this.kareBoyut, this.kareBoyut);
                    this.context.stroke();
               
                    //küp arka tarafini ciz.
                    this.context.beginPath();
                    this.context.strokeStyle  = 'rgba(255, 225, 225, 1)';
                    this.context.rect(150+(x*this.kareBoyut)+(z*50), 170+(y*this.kareBoyut)-(z*30), this.kareBoyut, this.kareBoyut);
                    this.context.stroke();
               
                    //sol üst yan çizgi
                    this.context.beginPath();
                    this.context.strokeStyle = 'rgba(255, 225, 225, 1)';
                    this.context.moveTo(150+(x*this.kareBoyut)+(z*50), 170+(y*this.kareBoyut)-(z*30));
                    this.context.lineTo(100+(x*this.kareBoyut)+(z*50), 200+(y*this.kareBoyut)-(z*30));
                    this.context.stroke();
               
                    //sağ üst yan çizgi
                    this.context.beginPath();
                    this.context.strokeStyle = 'rgba(255, 225, 225, 1)';
                    this.context.moveTo(300+(x*this.kareBoyut)+(z*50), 170+(y*this.kareBoyut)-(z*30));
                    this.context.lineTo(250+(x*this.kareBoyut)+(z*50), 200+(y*this.kareBoyut)-(z*30));
                    this.context.stroke();
               
                    //sol alt çizgi.
                    this.context.beginPath();
                    this.context.strokeStyle = 'rgba(255, 225, 225, 1)';
                    this.context.moveTo(150+(x*this.kareBoyut)+(z*50), 320+(y*this.kareBoyut)-(z*30));
                    this.context.lineTo(100+(x*this.kareBoyut)+(z*50), 350+(y*this.kareBoyut)-(z*30));
                    this.context.stroke();
               
                    //sağ alt çizgi.
                    this.context.beginPath();
                    this.context.strokeStyle = 'rgba(255, 225, 225, 1)';
                    this.context.moveTo(300+(x*this.kareBoyut)+(z*50), 320+(y*this.kareBoyut)-(z*30));
                    this.context.lineTo(250+(x*this.kareBoyut)+(z*50), 350+(y*this.kareBoyut)-(z*30));
                    this.context.stroke();
                }
            }
        }
    }
}

const game = new Kup3D();
window.onload = () => game.init();

</script>