How to draw only this part of the arc?

6
votes

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];
}
2
javascripthtmlcanvasgeometrygeometric-arc

2 Answers

2
votes

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.

1
votes

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?