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>
<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>


plus2net.com




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-2020 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer