Drawing another curve or quadratic will not get because the starting point of this curve will be the end point of the first curve ..

function drawArcA(){ var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); var startA = 45; var yAxis = 160; var yOffset = 100; context.moveTo(startA, yAxis); context.bezierCurveTo(startA, yAxis - yOffset, finishA, yAxis - yOffset, finishA, yAxis); context.lineWidth = 2; context.strokeStyle = "#c15b8a"; context.stroke();};

html

  <div class="canvas"> <canvas id="myCanvas" width="1000" height="500"></canvas> </div>

    1 answer 1

    Why not work? To form three more curves (or three line segments for a triangular arrow), the latter ends at the same point as the original curve. Delphi example:

    enter image description here

     var P: array of TPoint; dx, dy, len : Double; begin SetLength(P, 13); P[0] := Point(100, 100); P[1] := Point(200, 200); P[2] := Point(300, 200); P[3] := Point(400, 100); dx := P[2].X - P[3].X; dy := P[2].Y - P[3].Y; len := Math.Hypot(dx, dy); dx := dx / len; dy := dy / len; P[4].X := Round(P[3].X + 20 * dx * Cos(Pi/12) - 20 * dy * Sin(Pi/12)); P[4].Y := Round(P[3].Y + 20 * dx * Sin(Pi/12) + 20 * dy * Cos(Pi/12)); P[5] := P[4]; P[6].X := Round(P[3].X + 40 * dx * Cos(Pi/6) - 40 * dy * Sin(Pi/6)); P[6].Y := Round(P[3].Y + 40 * dx * Sin(Pi/6) + 40 * dy * Cos(Pi/6)); P[7].X := Round(P[3].X + 30 * dx); P[7].Y := Round(P[3].Y + 30 * dy); P[8] := P[7]; P[9].X := Round(P[3].X + 40 * dx * Cos(Pi/6) + 40 * dy * Sin(Pi/6)); P[9].Y := Round(P[3].Y - 40 * dx * Sin(Pi/6) + 40 * dy * Cos(Pi/6)); P[10].X := Round(P[3].X + 20 * dx * Cos(Pi/12) + 20 * dy * Sin(Pi/12)); P[10].Y := Round(P[3].Y - 20 * dx * Sin(Pi/12) + 20 * dy * Cos(Pi/12)); P[11] := P[10]; P[12] := P[3]; Canvas.PolyBezier(P);
    • I drew the context.moveTo like this (startB, yAxis); context.bezierCurveTo (startB, yAxis - yOffset, finishB, yAxis - yOffset, finishB, yAxis); context.lineTo (finishB-10,150); context.lineTo (finishB + 10,150); context.lineTo (finishB, 160); but I don’t need the top part) just a tick) - Silverfire
    • What are the difficulties? If something is not needed. then don't draw it. - MBo
    • So, and you know how it is drawn? Or are you talking at random? The line goes from the last end point, that is, if I start at the end of the curve, the first line goes up (arrow petal) from its end, it goes to the upper line (which I do not need) and from the end of the upper line goes the last right petal, I do not I know how to draw the right petal from the end of the bezier curve .. - Silverfire
    • Well, you also know about moveTo, which moves the current point without drawing. The logic is simple - after the curve the current point is at its end. We drew a lineTo one wing of the arrow (the principle of determining the coordinates - see calculation P6). Moved moveTo to the end of the other wing of the arrow (P9). A lineTo second wing of the arrow was drawn at the end point of the curve. - MBo
    • Yes, thanks) I didn’t know about moveTo) I’ve already done it) - Silverfire