Как заполнить квадратичную кривую на холсте?

Question

Возможно ли заполнить квадратичную кривую?

Я новичок в канве и хотел бы залить цвет верхней части того, что нарисовал в context.quadraticCurveTo (), но когда япопробовал context.fill (), он не заполняет мой ожидаемый раздел.Я хотел бы заполнить верхнюю часть холста, которая была отделена штрихом.

См. Прикрепленный фрагмент.

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const ch = canvas.height;
const cw = canvas.width;

// Quadratic Bézier curve
ctx.beginPath();
ctx.moveTo(0, 60);
ctx.quadraticCurveTo(ch, 0, cw, 35);
ctx.stroke();
ctx.fill();

#canvas {
  border: 1px solid;
}

<canvas id="canvas"></canvas>

Answer 1

Самый простой способ - просто нарисовать несколько линий по краю холста, чтобы сделать замкнутую форму:

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const ch = canvas.height;
const cw = canvas.width;

// Quadratic Bézier curve
ctx.beginPath();
ctx.moveTo(0, 60);
ctx.quadraticCurveTo(ch, 0, cw, 35);
ctx.lineTo(cw, 0);   // these two lines
ctx.lineTo(0, 0);    // are new
                     // you can even add a third one that goes from 0,0
                     // to 0,60 … but .fill() closes the shape even without it
ctx.stroke();
ctx.fill();

#canvas {
  border: 1px solid;
}

<canvas id="canvas"></canvas>