0

I need to draw an arc having initial, median and final points.

I am using the HTML5 canvas arc function (x, y, radius, startAngle, endAngle, anticlockwise) in JavaScript

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_shapes#Arcs

I have:

var initial = { x: 20, y: 40 };
var median = { x: 40, y: 33 };
var final = { x: 180, y: 40 };
  • 2
    what is going wrong? can we see some code? – mmk Sep 25 '14 at 01:41
  • To clarify, you want a quadratic curve starting at `initial` passing through `median` and ending at `final`? Unfortunately this request has an infinite number of solutions. However, check out this SO answer that picks one of the solutions that 'balances' the curve incoming to and outgoing from `median`: http://stackoverflow.com/questions/6711707/draw-a-quadratic-bezier-curve-through-three-given-points – markE Sep 25 '14 at 02:01

1 Answers1

2

The arc command will not draw your desired curve through the 3 points.

Instead, draw a quadratic curve through the 3 points using context.quadraticCurveTo

There are an infinite number of solutions for curves to pass through your 3 points.

Here's one solution using this equation that uses a median tension (t=0.50) for the curve:

var initial = { x: 20, y: 40 };
var median = { x: 40, y: 33 };
var final = { x: 180, y: 40 };

var controlX=2*median.x-initial.x/2-final.x/2;
var controlY=2*median.y-initial.y/2-final.y/2;

enter image description here

Here's example code and a Demo:

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");

var PI2=Math.PI*2;

var initial = { x: 20, y: 40 };
var median = { x: 40, y: 33 };
var final = { x: 180, y: 40 };

var controlX=2*median.x-initial.x/2-final.x/2;
var controlY=2*median.y-initial.y/2-final.y/2;


ctx.beginPath();
ctx.arc(initial.x,initial.y,4,0,PI2);
ctx.closePath();
ctx.moveTo(median.x,median.y);
ctx.arc(median.x,median.y,4,0,PI2);
ctx.closePath();
ctx.moveTo(final.x,final.y);
ctx.arc(final.x,final.y,4,0,PI2);
ctx.closePath();
ctx.fill();

ctx.strokeStyle='red';
ctx.beginPath();
ctx.moveTo(initial.x,initial.y);
ctx.quadraticCurveTo(controlX,controlY,final.x,final.y);
ctx.stroke();
body{ background-color: ivory; }
canvas{border:1px solid red;}
<canvas id="canvas" width=300 height=300></canvas>
markE
  • 102,905
  • 11
  • 164
  • 176