JSFiddle - React, Tailwind, and code Playground

by arcm111

CSS

body{
    padding: 10px;
    background: #4a4c4f;
}

JavaScript

var mail = [
[0,0,0,22], ["#E6E6E6","#B3B3B3"], [[[17.5,17], [10,10.5], [2,20.5], [33,20.5], [25,10.5]], [[1,1], [17.5,15], [34,1]], [[9,9.5], [1,19], [1,3.5]], [[26,9.5], [34,19], [34,3.5]]]
];
var canvas = document.createElement('canvas');
var scale = 1;
canvas.width = 35 * scale;
canvas.height = 22 * scale;
var ctx = canvas.getContext('2d');
ctx.scale(scale, scale);
var createPolygon = function(ctx, lw, lc, fc, arr)
{
    ctx.beginPath();
    ctx.lineWidth = lw;
    ctx.fillStyle = fc;
    ctx.strokeStyle = lc;
    ctx.moveTo(arr[0][0], arr[0][1]);
    for (var i = 1; i < arr.length; i++) ctx.lineTo(arr[i][0], arr[i][1]);
    ctx.lineTo(arr[0][0], arr[0][1]);
    ctx.fill();
    ctx.stroke();
    ctx.closePath();;
};
var createShape = function(arr)
{
    var gp = arr[0], gs = arr[1], p = arr[2];
    var grd = ctx.createLinearGradient(gp[0], gp[1], gp[2], gp[3]);
        grd.addColorStop(0, gs[0]);
        grd.addColorStop(1, gs[1]);    
    for (var i = 0; i < p.length; i++) createPolygon(ctx, 0.1, '#000', grd, p[i]);
};
createShape(mail);
document.body.appendChild(canvas)