сложная фигура canvas

Question

Как нарисовать эту фигуру в canvas с помощью javascript?
Вот сама фигура:

Answer 1

Вот, как-то так, контрольные точки подбирал на глаз.

Черная линия соединяет контрольные и опорные точки двух кривых Безье, которые образуют фигуру

let ctx = canvas.getContext("2d");

ctx.fillStyle = 'wheat';

ctx.fill(new Path2D(`
  M40 300 
  C 1 270 1 210 50 150
  C 180 0 250 1 300 50
  v300
`));

ctx.stroke(new Path2D(`
   M40 300 
   1 270 1 210 50 150
   180 1 250 1 300 50
`));

<canvas id=canvas width=300 height=300 />

БЛОГ НА HUSL

сложная фигура canvas

Ответы (1 шт):