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

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

canvas.width = window.innerWidth * devicePixelRatio;
canvas.height = window.innerHeight * devicePixelRatio;

canvasW = canvas.width;
canvasH = canvas.height;


//2次ベジェ曲線
ctx.beginPath();
ctx.moveTo(0, canvasH / 2);
ctx.quadraticCurveTo(canvasW / 2, 0, canvasW, canvasH / 2);
ctx.stroke();
ctx.closePath();

//3次ベジェ曲線
ctx.beginPath();
ctx.moveTo(0, canvasH);
ctx.bezierCurveTo(canvasW/4,canvasH/2,canvasW*3/4,canvasH/2,canvasW,canvasH);
ctx.stroke();
ctx.closePath();