I know I can draw arc with arc function of canvas but when I increase the size of that arc it changes its start and end x,y points. So I was thinking if we can draw arc with some other way keeping its start end points fixed while increasing it size.

Edit
Below is the images showing what I am looking for. First image shows a rectangle. when its side is stretched it changed to circle(2nd image). when side is stretched further it changed to big circle. At in all images you can see that end points of circle are joined to corners of rectangle. This is what I want to do.

1st Image

2nd Image

3rd Image

Or you can see this video to understand what I am looking to do.

What I have done
This fiddle shows result of my work.
To draw rectangle just click and drag your mouse.

Here is the code

I know I can draw arc with arc function of canvas but when I increase the size of that arc it changes its start and end x,y points. So I was thinking if we can draw arc with some other way keeping its start end points fixed while increasing it size.

Edit
Below is the images showing what I am looking for. First image shows a rectangle. when its side is stretched it changed to circle(2nd image). when side is stretched further it changed to big circle. At in all images you can see that end points of circle are joined to corners of rectangle. This is what I want to do.

1st Image

2nd Image

3rd Image

Or you can see this video to understand what I am looking to do.

What I have done
This fiddle shows result of my work.
To draw rectangle just click and drag your mouse.

Here is the code

• javascript
• html
• canvas

Share Improve this question Follow edited Jan 23, 2013 at 10:54 Sandy asked Jan 22, 2013 at 7:20 SandySandy 14.1k2222 gold badges7979 silver badges111111 bronze badges 6

• What do you mean with it changes start and end points? Can you show a picture of the problem? With "size" do you mean thickness? – 6502 Commented Jan 22, 2013 at 7:22
• @6502: I mean if we keep start & end point fixed and increase the size of arc then it will look more like a semi circle – Sandy Commented Jan 22, 2013 at 7:32
• @6502: like in quadratic curve when we increase its size, location of end points remain same. – Sandy Commented Jan 22, 2013 at 7:45
• About that bounty, what exactly do you mean with "The current answers do not contain enough detail."? – Cerbrus Commented Jan 29, 2013 at 12:10
• Look, if you're not going to explain why the answer's not good enough, we can't help you. – Cerbrus Commented Jan 31, 2013 at 11:55

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 4

I believe you're 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's 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 sample

There are a couple disadvantages to this is that it gets "slower" the closer you get to the circle, because the circle's getting exponentially larger in the hidden section (The slider's controlling it's size), and that it doesn't work for diagonal lines as it is right now.

Other than that, it works like expected.

Check this : http://jsfiddle/KZBzq/4/

Updated answer with bezierCurveTo

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. Is this was your requirement?