bezierCurveTo() with two control points manage by changing X & Y coordinates of the curve

Drag the sliders to change the X, Y position of both control points.

void gctx.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,end_x,end_y);

cp1x: X coordinate of first Control Point
cp1y: Y coordinate of first Control Point
cp2x: X coordinate of Second Control Point
cp2y: Y coordinate of Second Control Point
end_x: X coordinate of End point of Curve
end_y: Y coordinate of End Point of Curve

The start point of Bezier curve is last point of the current path or it can be set by using moveTo().

quatratic Curve with one control point

<canvas id="my_canvas" width="440" height="250"  style="border:1px solid #000000;"></canvas>
<script>
var my_canvas=document.getElementById("my_canvas");
var gctx=my_canvas.getContext("2d");
gctx.beginPath();
gctx.moveTo(10,10);
gctx.bezierCurveTo(100,200,200,100,430,10);
gctx.stroke();
</script>

bezierCurveTo() with two control points on Canvas

Subscribe