JSFiddle - React, Tailwind, and code Playground

by DeadByElpy

HTML

<canvas id="canva"></canvas>

JavaScript

(function(){
	var c = document.getElementById('canva').getContext('2d');
    var r = function(f,t){return Math.floor((Math.random()*t)+f);}
	c.beginPath();
	c.moveTo(0, 0);
    var yx = [40, 0, 50,15, 60, 0, 100, 0];
    var xy = [100,40, 85,50,100,60,100,100]
	var drawed = false;
    yx.forEach(function(e,p){
        if(!drawed) {c.lineTo(e,yx[p+1]);drawed = true;} else {
            drawed = false;
        }
    });drawed = false;
    xy.forEach(function(e,p){
        if(!drawed) {c.lineTo(e,xy[p+1]);drawed = true;} else {
            drawed = false;
        }
    });drawed = false;
    yx.forEach(function(e,p){
        if(!drawed) {c.lineTo(e,(100-yx[p+1]));drawed = true;} else {
            drawed = false;
        }
    });drawed = false;
    xy.forEach(function(e,p){
        if(!drawed) {c.lineTo((100-e),xy[p+1]);drawed = true;} else {
            drawed = false;
        }
    });
	c.closePath();
	c.fillStyle = '#FFF';
	c.fill();
	c.lineWidth = 3;
	c.strokeStyle = 'black';
	c.stroke();   
})()