Rectangle disintegration

index.html

<canvas id="canvas" width="900px" height="600px"></canvas>
<script src="./index.js"></script>

index.js

let randShift = .3;
let quadW = 15;
let quadH = 15;
let q = [ -quadW / 2, quadH / 2, quadW, quadH ];
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
let width = 900;
let height = 600;

function setup() {
    for (let i = 0, k = 1; i < height - quadH; i += quadH, k++) {
        ctx.save();

        ctx.translate(0, quadH * k);
        for (let j = 0; j < width - quadW; j += quadW) {
            ctx.translate(quadW, 0);
            ctx.fillStyle = `rgba(${Math.floor(Math.random() * (255 - k / 5 ))}, 
                ${Math.floor(Math.random() * (255 - k * (k / 10)))}, 
                ${Math.floor(Math.random() * (255 - k * (k / 5)))}, 1)`;
            ctx.beginPath();
            ctx.moveTo(q[0] + r(k), q[1] + r(k));
            ctx.lineTo(q[0] + q[2] + r(k), q[1] + r(k));
            ctx.lineTo(q[0] + q[2] + r(k), q[1] + q[3] + r(k));
            ctx.lineTo(q[0] + r(k), q[1] + q[3] + r(k));
            ctx.closePath();
            ctx.fill();
        }
        ctx.restore();
    }
}

setup();
function r(i) {
    let base = -i * randShift;
    return base + Math.random() * (i * randShift - base)
}