JSFiddle - React, Tailwind, and code Playground

by Valera Siestov

HTML

<canvas id="canvas" width="700" height="500"></canvas>

JavaScript

var canvas = document.getElementById('canvas'),
    corner = (function () {
    
        function generate(width, height, radius, left, top, right, bottom) {
            var ctx = canvas.getContext('2d'),
                x = top,
                y = left;
            
            ctx.beginPath();
            ctx.moveTo(x, height);

            ctx.quadraticCurveTo(0, (height) / 2, x, y);
            
            ctx.quadraticCurveTo(width / 2, 0, width, y);
            
            ctx.quadraticCurveTo(x + width, height / 2, width, height);
            ctx.quadraticCurveTo(width / 2, height + y, x, height);
            
            ctx.closePath();
            ctx.fill();
    
        }
        
        function init() {
        }
        
        return {
            init: init,
            create: generate
        };
    }());

corner.create(672, 419, 40, 50, 50, 12, 12);