JSFiddle - React, Tailwind, and code Playground

by dumptyd

HTML

<img src="https://i.redd.it/ex3xwox6cmr11.png" alt="">
<canvas id="c" height="300" width="288"></canvas>

CSS

img {
  position: absolute;
  height: 300px;
  top: 11px;
  left: 11px;
  z-index: -1;
  opacity: .3;
}

canvas {
  margin: 10px;
  height: 300px;
  border: 1px solid;
  width: 288px;
  z-index: 2;
}

JavaScript

const c = document.querySelector('#c');
const ctx = c.getContext('2d');

const curveTo = function(points, drawPoints = false) {
	ctx.moveTo((points[0].x), points[0].y);

	for(var i = 0; i < points.length-1; i ++) {
    // Draw point
    if (drawPoints) ctx.arc(points[i].x, points[i].y, 2, 0, Math.PI * 2, false);

    var x_mid = (points[i].x + points[i+1].x) / 2;
    var y_mid = (points[i].y + points[i+1].y) / 2;
    var cp_x1 = (x_mid + points[i].x) / 2;
    var cp_y1 = (y_mid + points[i].y) / 2;
    var cp_x2 = (x_mid + points[i+1].x) / 2;
    var cp_y2 = (y_mid + points[i+1].y) / 2;

    ctx.quadraticCurveTo(cp_x1,points[i].y ,x_mid, y_mid);
    ctx.quadraticCurveTo(cp_x2,points[i+1].y ,points[i+1].x,points[i+1].y);
    //ctx.stroke();
  }
  	if (drawPoints)
    	ctx.arc(points[points.length - 1].x, points[points.length - 1].y, 2, 0, Math.PI * 2, false)
    //ctx.stroke();
}

ctx.beginPath();
/* curveTo([
  { x: 30, y: 299 },
  { x: 70, y: 200 },
  { x: 70, y: 160 }
]); */
ctx.bezierCurveTo(35, 300 , 85, 240, 40, 180);

/* ctx.fillRect(0, 280, 20, 20); */
ctx.stroke();