JSFiddle - React, Tailwind, and code Playground

by loktar

HTML

<canvas id="canvas"></canvas>

JavaScript

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d");

canvas.width = canvas.height = 256;

var shapes = [];

for(var i = 0; i < 5; i++){
    var x = Math.random()*256,
        y = Math.random()*256,
        width = (Math.random()*30)+15,
        height= (Math.random()*30)+15;

    shapes.push({x:x, y:y, width : width, height : height});  
}

function draw(){
    ctx.clearRect(0,0,256,256);
    ctx.fillStyle = "red";
    ctx.strokeStyle = "black";
    for(var i = 0; i < 5; i++){
        var curShape = shapes[i];
        curShape.width++;
        curShape.height++;

        ctx.fillRect(curShape.x, curShape.y, curShape.width, curShape.height);
        ctx.strokeRect(curShape.x, curShape.y, curShape.width, curShape.height);
    }
    setTimeout(draw,20);
}

draw();