JSFiddle - React, Tailwind, and code Playground

by Harisankaran Parameswaran

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="container">
    <canvas height="100px" width="250px" class="bottom"></canvas> <span>Some content</span>

</div>

CSS

.container {
    float: left;
    position: relative;
    height: 75vh;
    width: 75vh;
    margin: 20px;
    color: beige;
    transition: all 1s;
}
canvas {
    height: 100%;
    width: 100%;
}
.container > span {
    position: absolute;
    top: 5px;
    left: 5px;
    padding: 5px;
}
.top + span {
    top: 30px;
}
.left + span {
    left: 30px;
}
body {
    background: radial-gradient(circle at 50% 50%, aliceblue, steelblue);
}
.btn-container {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 150px;
}
button {
    width: 150px;
    margin-bottom: 10px;
}
.container:nth-child(3) {
    clear: both;
}

JavaScript

$(document).ready(function () {
    var canvasEls = document.getElementsByTagName('canvas');
    paint(canvasEls[0]);
    $(window).on('resize', function () {
        var canvasEls = document.getElementsByTagName('canvas');
        setTimeout(function(){
            paint(canvasEls[0])
        }, 500);
    });

    function paint(canvas) {
        var ctx = canvas.getContext('2d');
        $('canvas').attr('height', $('.container').height());
        $('canvas').attr('width', $('.container').width());
        ctx.beginPath();
        ctx.moveTo(0, 0);
        ctx.lineTo($('.container').width(), 0);
        ctx.lineTo($('.container').width(), $('.container').height());
        ctx.lineTo(0, ($('.container').height() * 0.75));
        ctx.closePath();
        ctx.lineCap = 'round';
        ctx.fillStyle = 'tomato';
        ctx.fill();
    }
});