JSFiddle - React, Tailwind, and code Playground

by epoch

HTML

<div class="wrapper"> 
    <canvas id="mycanvas"></canvas>
</div>

CSS

div.wrapper {
    border-radius: 3px;
    box-shadow: 0px 0px 15px #222;
    margin: 20px auto;
    width: 560px;
    height: 314px;
}

div.wrapper > canvas {
    width:100%;
    height:100%;
}

JavaScript

(function drawShape() {
    var canvas = $('mycanvas');
    if (canvas.getContext) {
        var ctx = canvas.getContext('2d'),
            w = canvas.width, 
            h = canvas.height;
        
        ctx.fillStyle = 'rgb(213, 213, 213);';  
        ctx.fillRect (0, 0, w, h);  
        
        var left_marker = 110;
        
        var grd = ctx.createLinearGradient(43, 0, 20, h);
        // light blue
        grd.addColorStop(0, "#0e0e0e");
        // dark blue
        grd.addColorStop(1, "#7d7e7d");
        ctx.fillStyle = grd;
        ctx.fillRect(0, 0, left_marker, h);

        
        // Create gradients
        var radgrad = ctx.createRadialGradient(45, 45, 10, 52, 50, 30);
        radgrad.addColorStop(0, '#0e0e0e');
        radgrad.addColorStop(0.9, '#7d7e7d');
        //radgrad.addColorStop(1, 'rgba(1,159,98,0)');

        var radgrad2 = ctx.createRadialGradient(105, 105, 20, 112, 120, 50);
        radgrad2.addColorStop(0, '#FF5F98');
        radgrad2.addColorStop(0.75, '#FF0188');
        radgrad2.addColorStop(1, 'rgba(255,1,136,0)');

        var radgrad3 = ctx.createRadialGradient(95, 15, 15, 102, 20, 40);
        radgrad3.addColorStop(0, '#00C9FF');
        radgrad3.addColorStop(0.8, '#00B5E2');
        radgrad3.addColorStop(1, 'rgba(0,201,255,0)');

        var radgrad4 = ctx.createRadialGradient(0, 150, 50, 0, 140, 90);
        radgrad4.addColorStop(0, '#F4F201');
        radgrad4.addColorStop(0.8, '#E4C700');
        radgrad4.addColorStop(1, 'rgba(228,199,0,0)');

        // draw shapes
        //ctx.fillStyle = radgrad4;
        //ctx.fillRect(0, 0, 150, 150);
        //ctx.fillStyle = radgrad3;
        //ctx.fillRect(0, 0, 150, 150);
        //ctx.fillStyle = radgrad2;
        //ctx.fillRect(0, 0, 150, 150);
        //ctx.fillStyle = radgrad;
        //ctx.fillRect(0, 0, 150, 150);
    }
})();