Question

As the title states. Is this possible?

Edit: When i say doughnut I mean a top, 2D view

Is the only option to draw a segment of a circle, then draw a segment of a smaller circle with the same origin and smaller radius over the top, with the colour of the background? That would be crap if so 🙁

Answer 1

You do it by making a single path with two arcs.

You draw one circle clockwise, then draw a second circle going counter-clockwise. I won’t go into the detail of it, but the way paths are constructed knows to take this as a reason to un-fill that part of the path. For more detail of what its doing you can this wiki article.

The same would work if you were drawing a “framed” rectangle. You draw a box one way (clockwise), then draw the inner box the other way (counter-clockwise) to get the effect.

Here’s the code for a doughnut:

var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');

// Pay attention to my last argument!
//ctx.arc(x,y,radius,startAngle,endAngle, anticlockwise);  

ctx.beginPath()
ctx.arc(100,100,100,0,Math.PI*2, false); // outer (filled)
ctx.arc(100,100,55,0,Math.PI*2, true); // inner (unfills it)
ctx.fill();

Example:

http://jsfiddle.net/Hnw6a/

Drawing only a “segment” of it can be done by making the path smaller (you might need to use beziers instead of arc), or by using a clipping region. It really depends on how exactly you want a “segment”

Here’s one example: http://jsfiddle.net/Hnw6a/8/

// half doughnut
ctx.beginPath()
ctx.arc(100,100,100,0,Math.PI, false); // outer (filled)
ctx.arc(100,100,55,Math.PI,Math.PI*2, true); // outer (unfills it)
ctx.fill();