Question

I am drawing a concave shape in canvas using the following code:

    var ctx = canvas.getContext('2d');
    ctx.strokeStyle = '#FFFFFF';
    ctx.fillStyle = '#000000';
    ctx.beginPath();
    ctx.arc(0, 0, this.radius, Math.PI*13/8, Math.PI*11/8, false);
    ctx.moveTo(this.radius * Math.sin(Math.PI/8), -(this.radius) * Math.cos(Math.PI/8));
    ctx.arc(0, -(this.radius) * Math.cos(Math.PI/8), this.radius * Math.sin(Math.PI/8), 0, Math.PI, false);
    ctx.closePath();
    ctx.fill();
    ctx.restore();

The shape drawn should be a circle with another smaller circle cut out of it and it displays correctly when I use ctx.stroke() to draw it. However, when I try to use ctx.fill() on it (as the context requires), only the larger circle is filled, covering the smaller circle.

How do I make it so the shape is filled correctly within the stroke boundary?

Thanks,

DLiKS

Answer 1

You could draw the big circle then cut the small circle out of it:

https://developer.mozilla.org/en/Canvas_tutorial/Compositing

Try “destination-out”:

    ctx.strokeStyle = '#FFFFFF';
    ctx.fillStyle = '#000000';
    ctx.beginPath();
    ctx.arc(0, 0, this.radius, Math.PI * 13 / 8, Math.PI * 11 / 8, false);
    ctx.closePath();
    ctx.fill();

    ctx.globalCompositeOperation = "destination-out";
    ctx.beginPath();
    ctx.moveTo(this.radius * Math.sin(Math.PI / 8), -(this.radius) * Math.cos(Math.PI / 8));
    ctx.arc(0, -(this.radius) * Math.cos(Math.PI / 8), this.radius * Math.sin(Math.PI / 8), 0, Math.PI, false);
    ctx.closePath();
    ctx.fill();

I had to use translate to see the original example so this may not be quite right.