Circle drawing canvas with quadratic curve

Question

I know that I can draw an arc using the arc canvas function, but when I increase the size of this arc, it changes the beginning and end of x, y points. So I thought, is it possible to draw the arc in some other way, keeping fixed end points of the beginning, increasing its size.

Edit
Below are images showing what I'm looking for. The first image shows a rectangle. when its side is stretched, it changes to a circle (second image). when the side stretches further, it changes to a large circle. In all the images, you can see that the end points of the circle are connected to the corners of the rectangle. This is what I want to do.

1st image

2nd image

Third image

Or you can see this video to understand what I'm looking for.

What I've done
This fiddle shows the result of my work.
To draw a rectangle, simply click and drag.

Here is the code

Answer 1

I believe that you are looking for something like this:

 draw(0); $('#range').on('change', function(){ range = parseInt($(this).val()); draw(range) }) function draw(val){ var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'), x = 100, y = 50, d; context.clearRect(0, 0, canvas.width, canvas.height); d = Math.sqrt(Math.pow(val,2) + Math.pow(50,2)); context.beginPath(); context.lineWidth = 1; context.arc(x,y+val,d,0,2*Math.PI); // line color context.strokeStyle = 'black'; context.stroke(); // Cut off the top of the circle. context.clearRect(0, 0, canvas.width, y); // This stuff just to show some dots context.fillStyle = 'red'; context.fillRect(x-1,y-1,2,2); // Middle context.fillRect(x-52,y-2,4,4);//Target point 1 context.fillRect(x+48,y-2,4,4);// Target point 2 context.fillRect(x-2,y+d+val-2,4,4); // Point on circle context.fillStyle = 'black'; } 

Working example

There are several drawbacks to this: it becomes “slower” the closer you get to the circle, because the circle becomes exponentially larger in the hidden section (the slider controls its size), and that it does not work for diagonal lines, as it is now.

Other than that, it works as expected.

Answer 2

Note this: http://jsfiddle.net/KZBzq/4/

Updated Bezier Response by CurveTo

HTML

 <label>Range :</label> <input type="range" name="points" value="0" min="0" step="1" max="100" id="range"> <canvas id="myCanvas" width="578" height="250"></canvas> 

Js

 draw(100); $('#range').on('change', function(){ range = parseInt($(this).val()); draw(100-range) }) function draw(val){ var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'), x = 100, y = 100, cp1x = x/2, cp2x = y/2, cp1y = val, cp2y = val; context.clearRect(0, 0, canvas.width, canvas.height); context.beginPath(); context.lineWidth = 1; context.moveTo(25 , x); context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y); // line color context.strokeStyle = 'black'; context.stroke(); } 

Now x and Y are fixed. Was that your requirement?