bezierCurveTo() with two control points on CanvasDrag the sliders to change the X, Y position of both control points.
cp1x: X coordinate of first Control Pointcp1y: 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>
This article is written by plus2net.com team.
![]() | ||
| ||