bezierCurve

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')

$.lineWidth = 3
$.strokeStyle = 'rgba(0,0,0,.4)'
$.moveTo(150, 50)

let x1 = 300,
  y1 = 50,
  x2 = 0,
  y2 = 250,
  x3 = 150,
  y3 = 250

$.bezierCurveTo(x1, y1, x2, y2, x3, y3)
$.fillStyle = 'rgba(255,0,0,.6)'
$.fill()
$.stroke()

$.beginPath()
$.moveTo(150, 50)
$.bezierCurveTo(0, 50, 300, 250, 150, 250)
$.fillStyle = 'rgba(0,255,0,.6)'
$.fill()
$.stroke()

$.beginPath()
$.moveTo(50, 150)
$.bezierCurveTo(50, 300, 250, 0, 250, 150)
$.fillStyle = 'rgba(255,0,0,.6)'
$.fill()
$.stroke()

$.beginPath()
$.moveTo(50, 150)
$.bezierCurveTo(50, 0, 250, 300, 250, 150)
$.fillStyle = 'rgba(0,255,0,.6)'
$.fill()
$.stroke()