bezierCurveTo() with two control points on Canvas

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>
var my_canvas=document.getElementById("my_canvas");
var gctx=my_canvas.getContext("2d");


* indicates required
Subscribe to plus2net

    Post your comments , suggestion , error , requirements etc here .

    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2024 All rights reserved worldwide Privacy Policy Disclaimer