cubicCurve

by aio350

HTML

<canvas width="300" height="300" style="border: 1px dotted #222"></canvas>

CSS

body {
  margin: 0;
  height: 100vh;
  background: radial-gradient(circle, skyblue, steelblue);
  display: flex;
  justify-content: center;
  align-items: center;
}

JavaScript

const canvas = document.querySelector('canvas')
const $ = canvas.getContext('2d')

$.beginPath()
$.moveTo(75, 40)
$.bezierCurveTo(75, 37, 70, 25, 50, 25)
$.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5)
$.bezierCurveTo(20, 80, 40, 102, 75, 120)
$.bezierCurveTo(110, 102, 130, 80, 130, 62.5)
$.bezierCurveTo(130, 62.5, 130, 25, 100, 25)
$.bezierCurveTo(85, 25, 75, 37, 75, 40)
$.fillStyle = 'red'
$.fill()