JSFiddle - React, Tailwind, and code Playground

by PiereDome

HTML

<canvas id='canvas' width='800' height='800'></canvas>

JavaScript

//Golden Ratio
canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');

x = canvas.width / 2;
y = canvas.height / 2;
Box = function(x, y, startingSize) {
    this.x = x;
    this.y = y;
    this.size = startingSize;
    this.w = this.size;
    this.h = this.size;
    var directionArray = [1, 1, -1, -1, 1];
    var count = 1;
    var prevSize = startingSize;
    this.fill = '#333';
    this.update = function() {
        this.x += this.w;
        this.y += this.h;
        this.fill = '#' + Math.floor(Math.random() * 16777215).toString(16);
    var temp = this.size;
    this.size += prevSize;
    prevSize = temp;
    this.w = this.size * directionArray[count];
    this.h = this.size * directionArray[count + 1];
    count = (count < 3) ? count + 1 : 0;
    console.log(this.x, this.y, this.w, this.h);
};
};

box = new Box(x, y, 5);
for (i = 0; i < 10; i++) {
    ctx.fillStyle = box.fill;
    ctx.strokeRect(box.x, box.y, box.w, box.h);
    ctx.fillRect(box.x, box.y, box.w, box.h);
    ctx.beginPath();
    //ctx.arc(box.x,box.y,box.size,0,Math.PI*2, true);
    ctx.fill();
    box.update();
}