How to draw only this part of the arc?

Asked 8/12, 2011 at 0:38 Answered 8/12, 2011 at 1:10

Solved javascript html canvas geometry geometric-arc

Take a look at this picture:

enter image description here

I know p1, p2, and center, which are 2d points. I also know the angle p1-center-p2 and the radius r.

How can I draw only the filled part of the arc using the canvas' function arc()?

EDIT

What I really need to do is, given 2 points and an angle, draw a curved line between these 2 points such that p1-center-p2 angle is the given angle.

What I do is calculate the center and the radius of the circunference that has those 2 points in it and now I need to draw the line that joins p1 and p2 and has the given angle. This is my function to calculate the center of the circunference (which works properly)

function getCenter(v0x, v0y, v1x, v1y, curve) {
    // result = p0
    resx = parseFloat(v0x);
    resy = parseFloat(v0y);

    // tmpvec = (p1 - p0) * .5
    tmpx = (v1x - v0x) / 2;
    tmpy = (v1y - v0y) / 2;

    // result += tmpvec
    resx = resx + tmpx;
    resy = resy + tmpy;

    // rotate 90 tmpvec
    tmptmpx = tmpx;
    tmptmpy = tmpy;
    tmpy = -tmptmpx;
    tmpx = tmptmpy;

    // tmpvec *= 1/tan(c/2)
    tmpx *= 1/Math.tan(curve/2);
    tmpy *= 1/Math.tan(curve/2);

    // return res + tmpvec
    return [resx+tmpx, resy+tmpy];
}

Endocardium answered 8/12, 2011 at 0:38 Comment(0)

The function atan2(y,x) is helpful for calculating the angle to points in a circle.

function drawArcPart(cx, cy, radius, p1x, p1y, angle) {

    var x = p1x - cx;
    var y = p1y - cy;

    var startAngle = Math.atan2(y,x);
    var endAngle = startAngle - angle;

    var ctx = document.getElementById('canvas').getContext('2d');
    ctx.fillStyle='black';
    ctx.beginPath();
    ctx.arc(cx, cy, radius, startAngle, endAngle, true);
    ctx.fill();
}

enter image description here

I have uploaded this JavaScript to jsFiddle, with an extension that also draws the points, and both your examples.

Kick answered 8/12, 2011 at 0:44 Comment(7)

But I have other things drawn which I don't want to delete – Endocardium 8/12, 2011 at 0:55

What I really need is something like: moveTo(p1) arcTo(p2, radius) – Endocardium 8/12, 2011 at 12:0

This doesn't seem to be working when p1 has a different x component than p2: i.imgur.com/AKpgv.png – Endocardium 8/12, 2011 at 15:29

Sure: p1 = (100,100) p2 = (100,300) center = (200,200) radius = 100 * sqrt(2) Another: p1 = (100,100) p2 = (150,300) center = (225,175) radius = 145.77 I can provide you a function that calculates the center and the radius given 2 points and an angle (it's what I'm using) – Endocardium 8/12, 2011 at 18:1

Btw, I edited the main post to fully explain what I'm trying to achieve. – Endocardium 8/12, 2011 at 18:13

@Ivan: Thanks for the examples. See my new solution using Math.atan2(y,x). I hope this is what you are looking for. – Kick 11/12, 2011 at 0:35

+1 for the pretty pictures and editing the question tags to be more appropriate (even if it might have been a 'bump' edit, it was appropriate ;) – Contamination 13/12, 2011 at 17:31

Try this

<html>
    <head></head>
<body onload="drawShape();">
<div>
    <canvas id="tutorial" width="150" height="200"></canvas>
</div>
<SCRIPT type="text/javascript">
function drawShape(){
    // get the canvas element using the DOM
    var canvas = document.getElementById('tutorial');
    // Make sure we don't execute when canvas isn't supported
    if (canvas.getContext){
        var ctx = canvas.getContext('2d');

        ctx.beginPath();
        var x          = 100;               // x coordinate
        var y          = 100;               // y coordinate
        var radius     = 100;                    // Arc radius
        var startAngle = (Math.PI)-((Math.PI)/4);                     // Starting point on circle
        var endAngle   = (Math.PI)+((Math.PI)/4); // End point on circle
        ctx.arc(x,y,radius,startAngle,endAngle, false);    
        ctx.fill();
    } else {
        alert('You need Safari or Firefox 1.5+ to see this demo.');
    }
}
</SCRIPT>
</body>
</html>

It is a modified example from mozilla HTML5 tuts

And the result is here

Is this what you want?

Quaff answered 8/12, 2011 at 1:10 Comment(0)

Recommended topics

Hot tags