CODEWITHSUNDEEP
javascriptcanvas
Xun Yang
Xun Yang

Reputation: 4419

javascript canvas imperfect clipping

I'm trying to draw a "ring-wedge" using the counter-clockwise method of clipping a path. 

var cav=document.getElementById("cav");
var ct=cav.getContext("2d");

function drawWedge(r,s,e){
    ct.moveTo(250,250);
    ct.arc(250,250,r,e,s,true);
    ct.moveTo(250,250);
    ct.arc(250,250,r*0.6,s,e,false);
}
document.onmousemove=function(e){
ct.fillStyle="#ff0000";

    drawWedge(50,Math.PI/5*3,Math.PI/9*7);
    ct.fill();

}

You can see a fiddle here:

http://jsfiddle.net/u8vjc/2/

I'm using Chrome. If you look carefully, you can see that even if I use the same angles for both arcs, it doesn't clip cleanly. Am I doing something wrong?

Upvotes: 0

Views: 85

Answers (1)

Alnitak
Alnitak

Reputation: 340055

To draw a wedge, you only need draw two arcs - the lines between the two arcs will be drawn in automatically:

function drawWedge(r, s, e){
    ct.beginPath();
    ct.arc(250, 250, r, e, s, true);
    ct.arc(250, 250, r * 0.6, s, e, false);
    ct.closePath();
}

You should call beginPath explicitly and must call closePath to get the final line joining the end of the second arc back to the start of the first arc.

See http://jsfiddle.net/alnitak/tEY6Z/

Upvotes: 2

Related Questions