Question

I’m new to HTML5 canvas drawing im trying to fill this shape:

This is the code that I used to draw it:

    function load() {
        draw();
    }

    function draw() {
        var ctx = document.getElementById("canvas").getContext('2d');
        ctx.beginPath();
        ctx.moveTo(37, 205);
        ctx.lineTo(79, 160);
        ctx.lineTo(136, 221);
        ctx.lineTo(167, 188);
        ctx.lineTo(124, 141);
        ctx.quadraticCurveTo(113, 129, 127, 113);
        ctx.lineTo(204, 28);
        ctx.moveTo(149, 22);
        ctx.arc(174, 45, 34, (223 * Math.PI) / 180, (330 * Math.PI) / 180);
        ctx.moveTo(149, 22);
        ctx.lineTo(38, 138);
        ctx.moveTo(37, 205);
        ctx.arc(66, 171, 43, (129 * Math.PI) / 180, (230 * Math.PI) / 180);
        ctx.stroke();
    }

Now when I change from stroke to fill I get this:

I know it´s a problem with the order of the drawing, I used to fix this in a software like 3D Studio Max by flipping the empty parts but here I`m lost and I don’t know what I should do to fix this.

I want the whole shape to be filled normally, I don’t know how to explain it but I guess the images say it all, this is what i want to get:

Answer 1

You’ll notice something funny about the path you made: You’re picking up your pen with moveTo commands. This is bad if you want to fill. Without moveTo, your shape really looks like this:

The reason the fill looks odd is because of these moveTos. And the reason you’re using moveTo is because you used arc in a funny way.

My suggestion would be not not use arc in such a way that the ending point is where you would expect, or else use bezier or quadractic instead altogether.

In my opinion arc is kind of a pain to use well, so I’d suggest just going with bezier/quadratic curves instead.

Here’s an example of a similar shape done with quadratic curves instead. I didn’t get the control points identical though, you’ll have to do that bit on your own.

Drawn with quadratics: