The bezier curve requires ending points and two control points and starting points will be current point. You can use the beginPath and moveTo methods to set a starting point.
We use the bezierCurveTo method to draw a bezier curve.
ctx.bezierCurveTo(cpx1, cpy1, cpx2, cpy2, x, y);
cpx1 and cpy1: are the first control points of the bezier curve.
cpx2 and cpy2: are the second control points of the bezier curve.
x and y: are the ending points of the bezier curve.
<html> <head> <title>Draw Arc</title> <style type="text/css"> #MyCanvas {border:1px solid black;} </style> <script type="text/javascript"> function drawGradient() { var ctx; var canvas = document.getElementById("MyCanvas"); if (canvas.getContext) { ctx = canvas.getContext("2d"); // Draw a quadratic curve . ctx.beginPath(); ctx.lineWidth = "2"; ctx.strokeStyle = "black"; ctx.moveTo(50, 150); ctx.bezierCurveTo(200, 200, 200, 0, 300, 100); ctx.stroke(); } } </script> </head> <body onload="drawGradient();"> <canvas id="MyCanvas" width="400" height="200"> This browser or document mode doesn't support canvas object</canvas> </body> </html>
I need a bezier curve with 4 points however line connecting p1 and p2 should be touching the curve at its mid point. Chaikin 1/4 method. Can you modify the code for that
https://www.iit.bme.hu/~salvi/archive/snippets/subdivision.html
4 control points, show control polygon and chaikin 1/4 method. Can you modify the code for that