JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="c" >

JavaScript

var c2 = document.getElementById('c').getContext('2d');
c2.fillStyle = '#f00';
c2.beginPath();

c2.moveTo(0, 0);
c2.lineTo(200, 0);
c2.lineTo(200, 80);
c2.lineTo(50, 100);
c2.lineTo(0, 80);

 
/*c2.moveTo(0, 0);
c2.lineTo(50, 10);
c2.lineTo(40, 20);
c2.lineTo(15, 20);*/

c2.moveTo(0, 0);
c2.arc(100, 30, 20, 0, 2 * Math.PI, true);


c2.moveTo(0, 50);
c2.arc(100, 80, 20, 0, 2 * Math.PI, true);



c2.closePath();
c2.fill();