JSFiddle - React, Tailwind, and code Playground

by Kevin Mwangi

HTML

<canvas id="canvas1" width="400" height="400"></canvas>

CSS

canvas {
    border: 1px solid gray;
}

JavaScript

var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');


var path = new Path2D('M15.2801163,35.60616 L0,27.28224 L0,7.07976 L2.64653488,5.86008 C2.78855814,5.7888 3.80795349,5.26824 4.88069767,4.34952 C5.81574419,3.5496 6.44223256,2.47896 6.49990698,2.37888 L7.76874419,0.00216 L23.1404186,0 L24.4085349,2.37528 C24.4957674,2.52576 25.1143256,3.56616 26.029907,4.34952 C27.1711395,5.32656 28.2669535,5.8608 28.2784884,5.86656 L30.927186,7.0884 L30.9098837,10.0224 L30.9098837,27.28728 L15.2801163,35.60616 Z');
ctx.fillStyle = '#00ADED';
ctx.fill(path);