JSFiddle - React, Tailwind, and code Playground

by jakie8

HTML

<canvas id="glydr" width="600" height="500"></canvas>

CSS

body{
    margin:0px;
    padding:0px;
    text-align:center;
}

canvas{
    margin-left:auto;
    margin-right:auto;
    border:1px solid black;
}

JavaScript

var canvas = document.getElementById("glydr");
var context = canvas.getContext("2d");


function setShadow(ctx, color, ox, oy, blur) {
    ctx.shadowColor = color;
    ctx.shadowOffsetX = ox;
    ctx.shadowOffsetY = oy;
    ctx.shadowBlur = blur;
    return [color, ox, oy, blur].join(", ");
}


function drawIt(width, num, padding, elasticity) {

    elasticity*=-1;
    
    //padding*=1;
    var w = $('#glydr').width();
    var h = $('#glydr').height();

    //Shadow
    setShadow(context, "black", 0, 0, 5);

    context.fillStyle = "rgba(255, 255, 255, 1.0)";

    var mPiece = parseInt((num)/2);
    

    if (isNaN(padding)) {


        if (padding == "auto") {
            padding = parseInt(((w - (width * num)) / (num + 1)));

            for (var i = 0; i < num; i++) {
                if(i<mPiece)
                    context.fillRect(padding + (i * (padding + width)),((elasticity/num)*i)+(h-width-1), width, width);
                else
                    context.fillRect(padding + (i * (padding + width)),((elasticity/num)*(num-i-1))+(h-width-1), width, width);
            }
        }
    }
    else {
        var center = (w - ((num * width) + padding * num)) / 2;

        for (var i = 0; i < num; i++) {
                if(i<mPiece)
                    context.fillRect(center + (i * (padding + width)),((elasticity/num)*i)+(h-width-1), width, width);
                else
                    context.fillRect(center + (i * (padding + width)),((elasticity/num)*(num-i-1))+(h-width-1), width, width);
            }
    }



}




drawIt(50, 7, "auto", 350);