ベジェ曲線

なめらかな曲線で二点を結びます。

quadraticCurveTo

吹き出しの描画です。
cot.beginPath();
cot.moveTo(75, 25);
cot.quadraticCurveTo(25, 25, 25, 62.5);
cot.quadraticCurveTo(25, 100, 50, 100);
cot.quadraticCurveTo(50, 120, 30, 125);
cot.quadraticCurveTo(60, 120, 65, 100);
cot.quadraticCurveTo(125, 100, 125, 62.5);
cot.quadraticCurveTo(125, 25, 75, 25);
cot.stroke();

quadraticCurveTo(cp1x,cp1y,終点x,終点y)
吹き出しの左上の過度の描画の仕組みです。
現在位置はmoveToなどで指定された始点からcp1x,cp1y,(制御点)を使用して終点へ二次曲線を描きます。

bezierCurveTo

quadraticCurveTo(cp1x,cp1y,cp2x,cp2y,終点x,終点y)
現在位置(moveToなどで指定された)始点からcp1x,cp1y,cp2x,cp2y,(制御点)を使用して終点へ三次曲線を描きます。

cot2.beginPath();
cot2.moveTo(75, 40);
cot2.bezierCurveTo(75, 37, 70, 25, 50, 25);
cot2.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
cot2.bezierCurveTo(20, 80, 40, 102, 75, 120);
cot2.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
cot2.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
cot2.bezierCurveTo(85, 25, 75, 37, 75, 40);
cot2.fill();

cot2.moveTo(75, 40);始点
cot2.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, 終点x, 終点y);
始点と終点を二か所の制御点で操作します。小さいので拡大します。

始点と終点を二か所の制御点で操作します。拡大しても見えにくいですね。