# fillPath doesn't fill path

**URL:** <https://forum.juce.com/t/fillpath-doesnt-fill-path/37391>\
**Category:** Development\
**Created:** [January 30, 2020, 1:22pm UTC](https://forum.juce.com/t/fillpath-doesnt-fill-path/37391 "2020-01-30T13:22:01Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mrugalla](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/mrugalla/32/13092_2.png) [@Mrugalla](https://forum.juce.com/u/Mrugalla)\
**Post date:** [January 30, 2020, 1:22pm UTC](https://forum.juce.com/t/fillpath-doesnt-fill-path/37391/1 "2020-01-30T13:22:01Z")

</div>

it only seems to draw the lines, just like strokePath, but with less options. how would i go about actually filling the space inside of a path that ends where it starts?

---

<div class="post-metadata">

**Author:** ![asimilon](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/asimilon/32/4235_2.png) [@asimilon](https://forum.juce.com/u/asimilon)\
**Post date:** [January 30, 2020, 1:42pm UTC](https://forum.juce.com/t/fillpath-doesnt-fill-path/37391/2 "2020-01-30T13:42:03Z")

</div>

Are you using `setFillType` before `fillPath`? I think this might be why it’s not working for you if not.

eg:

```auto
    auto triangle = Path();
    triangle.startNewSubPath(19.0 / 2.0, 2.0);
    triangle.lineTo(17.0, 17.0);
    triangle.lineTo(2.0, 17.0);
    triangle.closeSubPath();
    auto transform = triangle.getTransformToScaleToFit(getLocalBounds().toFloat(), true);
    auto fillType = FillType();
    fillType.setColour(Colours::black);
    g.setFillType(fillType);
    g.fillPath(triangle, transform);

```

---

<div class="post-metadata">

**Author:** ![CrushedPixel](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/crushedpixel/32/8654_2.png) [@CrushedPixel](https://forum.juce.com/u/CrushedPixel)\
**Post date:** [January 30, 2020, 2:08pm UTC](https://forum.juce.com/t/fillpath-doesnt-fill-path/37391/3 "2020-01-30T14:08:50Z")

</div>

Perhaps you’re not using `closeSubPath` to close the path? Simply adding the same point as start and end point doesn’t suffice.

---

<div class="post-metadata">

**Author:** ![matkatmusic](https://avatars.discourse-cdn.com/v4/letter/m/dfb087/32.png) [@matkatmusic](https://forum.juce.com/u/matkatmusic)\
**Post date:** [January 30, 2020, 9:55pm UTC](https://forum.juce.com/t/fillpath-doesnt-fill-path/37391/4 "2020-01-30T21:55:21Z")

</div>

Wow, i’m just discovering this class

[https://docs.juce.com/master/classFillType.html#a10bd0d13433133545b26ea3894b3c641](https://docs.juce.com/master/classFillType.html#a10bd0d13433133545b26ea3894b3c641)

Doesn’t it make sense to make the `alpha` be its own member, instead of pulled from some `colour` member?

---

<div class="post-metadata">

**Author:** ![Mrugalla](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/mrugalla/32/13092_2.png) [@Mrugalla](https://forum.juce.com/u/Mrugalla)\
**Post date:** [January 31, 2020, 5:30am UTC](https://forum.juce.com/t/fillpath-doesnt-fill-path/37391/5 "2020-01-31T05:30:42Z")

</div>

hey. thanks for your help 🙂 i added the things that you suggested now, but i still have a problem. my code looks like this:

 ![Unbenannt](https://us1.discourse-cdn.com/flex026/uploads/juce/original/2X/4/489dca8682801ece2afa7c72a42090b4b65e8cdd.png)

my goal is that everything to the right of the yellow line becomes a bit darker, just like the rectangle at the top. some kinda… universal function that fills everything with a colour, no matter which shape it has. as you can see the code didn’t do that. (not even sure what it did in general.) maybe you misunderstood me or i made something wrong here… idk. also i must admit i was kinda expecting it to be more of a one-liner, since filling rectangles is also like that^^. maybe a point for the improvement of juce.

if all this stuff is not so easily possible i’d also be happy about just a function for filling triangles for this particular project. then i could make it look like a whole piece, while actually being fragments

---

<div class="post-metadata">

**Author:** ![matkatmusic](https://avatars.discourse-cdn.com/v4/letter/m/dfb087/32.png) [@matkatmusic](https://forum.juce.com/u/matkatmusic)\
**Post date:** [January 31, 2020, 7:09am UTC](https://forum.juce.com/t/fillpath-doesnt-fill-path/37391/6 "2020-01-31T07:09:27Z")

</div>

You need to define a gradient whose point members are the left side and right side of the area you want to paint with the gradient.

---

<div class="post-metadata">

**Author:** ![asimilon](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/asimilon/32/4235_2.png) [@asimilon](https://forum.juce.com/u/asimilon)\
**Post date:** [January 31, 2020, 7:34am UTC](https://forum.juce.com/t/fillpath-doesnt-fill-path/37391/7 "2020-01-31T07:34:14Z")

</div>

Not sure if this is the problem, but 2 things might help:

- Don’t use the `Array` intermediary, just add points to a `Path` directly.
- Don’t add the last point (0.f, 2.f), just close the path.

You don’t need any of the `transform` stuff since you’re not using it, that was just an example that was specific to my particular code that I just copy/pasted, sorry for the red herring!

Presumably `transBlack` is defined as a semi-opaque black?

It would be easy to give you proper code example that fits your use case _if_ you had pasted the code here rather than a screen shot, use triple back ticks ( ` x 3 ) to surround your code (or use the \</\> button on the code after highlighting it here in the editor) in future, makes life easier. 😉

---

<div class="post-metadata">

**Author:** ![Mrugalla](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/mrugalla/32/13092_2.png) [@Mrugalla](https://forum.juce.com/u/Mrugalla)\
**Post date:** [January 31, 2020, 6:30pm UTC](https://forum.juce.com/t/fillpath-doesnt-fill-path/37391/8 "2020-01-31T18:30:16Z")

</div>

> [@richie](#):
>
> Don’t use the `Array` intermediary, just add points to a `Path` directly.

this is going to be slightly offtopic but i’d like to explain this. i made a grid-class that draws a grid on the component and then lets me make layout decisions based on that grid. however i noticed that it’s kinda unintuitive sometimes, that a line-object’s last 2 values are not the relative amount of pixels away from that start, just like when you make a rectangle, but the absolute values of that position. so i wrote a function that draws a path if you just give it an array of “movements”. it works fine as you can see. it draws the yellow path.

> [@richie](#):
>
> You don’t need any of the `transform`

thank you for clarifying that! i am still confused about transform and try to avoid it as much as possible when i’m not in the mood for riddles.

> [@richie](#):
>
> just close the path

ok, that was something i actually asked myself. when i only used closePath it didn’t drew that last line so i thought it wouldn’t work like that.

> [@matkatmusic](#):
>
> You need to define a gradient whose point members are the left side and right side of the area you want to paint with the gradient.

thanks! that might be it. trying to figure out how to use gradient-objects now.

edit: currently trying to understand filltype and gradient-objects. if i understand it correctly a colourGradient is basically just an object with 2 colours and some functions to draw lines that go from one colour to another. maybe there is a misunderstanding here. i don’t want to make a gradient. i want to take this opaqueblack-colour called transBlack and apply it to the whole area to the right of the yellow line. just like you’d fill a rectangle, but with more complex shapes than that.

if i understood fillType already it changes the way paths are being rendered by Graphics& g. however i don’t see any function in it that claims to enable me to fill a shape with a colour. i mean these functions also use the word “fill” but they are made for drawing lines, not filling space, aren’t they?

---

<div class="post-metadata">

**Author:** ![matkatmusic](https://avatars.discourse-cdn.com/v4/letter/m/dfb087/32.png) [@matkatmusic](https://forum.juce.com/u/matkatmusic)\
**Post date:** [January 31, 2020, 6:58pm UTC](https://forum.juce.com/t/fillpath-doesnt-fill-path/37391/9 "2020-01-31T18:58:21Z")

</div>

> [@hdlAudio](#):
>
> just like you’d fill a rectangle, but with more complex shapes than that.

Then you need 2 paths.  
one path includes the line and the left edge of your GUI  
The other path includes the line, and the right edge of the GUI.

Make them closed paths so you can `g.fillPath()` them.

```auto
Path line; //the line itself, not closed.

Path left, right;
left.addPath(line);
left.lineTo(bounds.getBottomLeft().toFloat());
left.closeSubPath();

right.addPath(line);
right.lineTo(bounds.getBottomRight().toFloat());
right.lineTo(bounds.getTopRight().toFloat());
right.closeSubPath();

g.setColour(Colours::yellow);
g.strokePath(line, PathStrokeType(2));
g.setColour(leftFill);
g.fillPath(left);
g.setColour(rightFill);
g.fillPath(right);

```

---

<div class="post-metadata">

**Author:** ![Mrugalla](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/mrugalla/32/13092_2.png) [@Mrugalla](https://forum.juce.com/u/Mrugalla)\
**Post date:** [January 31, 2020, 7:46pm UTC](https://forum.juce.com/t/fillpath-doesnt-fill-path/37391/10 "2020-01-31T19:46:01Z")

</div>

![Unbenannt](https://us1.discourse-cdn.com/flex026/uploads/juce/original/2X/0/0633e44bf9fba97859558f236bb8bd16cab4a0ea.png)

that kinda just draws the same line again. unexpected though. i thought it would add lines that go to these corners.

---

<div class="post-metadata">

**Author:** ![matkatmusic](https://avatars.discourse-cdn.com/v4/letter/m/dfb087/32.png) [@matkatmusic](https://forum.juce.com/u/matkatmusic)\
**Post date:** [January 31, 2020, 7:49pm UTC](https://forum.juce.com/t/fillpath-doesnt-fill-path/37391/11 "2020-01-31T19:49:14Z")

</div>

You are going to need to figure out what you want your path shape to be for the area you’re trying to fill. That’s not something we can debug for you.

---

<div class="post-metadata">

**Author:** ![Mrugalla](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/mrugalla/32/13092_2.png) [@Mrugalla](https://forum.juce.com/u/Mrugalla)\
**Post date:** [January 31, 2020, 7:53pm UTC](https://forum.juce.com/t/fillpath-doesnt-fill-path/37391/12 "2020-01-31T19:53:44Z")

</div>

i’m not even sure if it’s really a “bug”. it’s either a completely missing function or no one understands me.

 ![Unbenannt](https://us1.discourse-cdn.com/flex026/uploads/juce/original/2X/f/f4a0a0eb9186ddb14afcc4a07af8d57a893d61ab.png)  
i just want to find a function that looks at a closed path and draw a colour everywhere inside of it, like this green space that i just drew in gimp for demonstrational purposes. the reason why i think that no one quite gets me here is that i don’t believe there is no function for such stuff. i mean i can’t be the first person here who wants to fill a different shape than a rectangle or ellipse, can i?

---

<div class="post-metadata">

**Author:** ![danielrudrich](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/danielrudrich/32/3735_2.png) [@danielrudrich](https://forum.juce.com/u/danielrudrich)\
**Post date:** [January 31, 2020, 8:00pm UTC](https://forum.juce.com/t/fillpath-doesnt-fill-path/37391/13 "2020-01-31T20:00:57Z")

</div>

You sure getLinePath really does what you want? Filling closed paths works without problems. Maybe your path is really just a line path (seems it’s not a JUCE method right?).  
You might want to test it with one of the examples the others posted above.

---

<div class="post-metadata">

**Author:** ![cpr2323](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/cpr2323/32/18682_2.png) [@cpr2323](https://forum.juce.com/u/cpr2323)\
**Post date:** [January 31, 2020, 8:01pm UTC](https://forum.juce.com/t/fillpath-doesnt-fill-path/37391/14 "2020-01-31T20:01:45Z")

</div>

Sure. I draw a tab and edge on the side of a component. There must be something incorrect in what you are doing.

```auto
resized()
{
    browserTabPath.clear ();
    browserTabPath.startNewSubPath (0.0f, startY);
    browserTabPath.lineTo (tabHeight, startY);
    browserTabPath.lineTo (tabHeight, startY + tabWidth);
    browserTabPath.lineTo (0.0f, startY + tabWidth);
    browserTabPath.closeSubPath ();
}
	
paint()
{
	g.setColour (AppBlue);
	g.fillPath (browserTabPath);
}

```

![image](https://us1.discourse-cdn.com/flex026/uploads/juce/original/2X/2/21e2a40682b73e93842c76ddde4b9299cb82020c.png)

---

<div class="post-metadata">

**Author:** ![matkatmusic](https://avatars.discourse-cdn.com/v4/letter/m/dfb087/32.png) [@matkatmusic](https://forum.juce.com/u/matkatmusic)\
**Post date:** [January 31, 2020, 8:03pm UTC](https://forum.juce.com/t/fillpath-doesnt-fill-path/37391/15 "2020-01-31T20:03:09Z")

</div>

Sounds like you don’t understand how to create a path properly.

```auto
void paint(Graphics& g)
{
    auto bounds = getLocalBounds().toFloat();
    Path p;
    p.startNewSubPath(bounds.getTopLeft());
    p.lineTo(bounds.getTopRight());
    p.lineTo(bounds.getBottomRight());
    p.closeSubPath();

    g.setColour(Colours::green);
    g.fillPath(p);
}

```

Now just make your path be the complex path you need.  
The yellow border is a path filled with black  
the histogram plots are Paths filled with a gradient.

 ![Screen Shot 2020-01-31 at 12.02.14 PM](https://us1.discourse-cdn.com/flex026/uploads/juce/original/2X/1/1584cad2330606886d27fa5c0ca0c022b6bc8698.png)

---

<div class="post-metadata">

**Author:** ![Mrugalla](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/mrugalla/32/13092_2.png) [@Mrugalla](https://forum.juce.com/u/Mrugalla)\
**Post date:** [January 31, 2020, 8:51pm UTC](https://forum.juce.com/t/fillpath-doesnt-fill-path/37391/16 "2020-01-31T20:51:59Z")

</div>

> [@danielrudrich](#):
>
> You sure getLinePath really does what you want?

yeah i’m pretty sure it does. i wrote it myself and it’s a very easy method. it just creates a path that consists of an unspecific amount of lines. this is the code, if you wanna check:

```
Path getLinePath(Array<Array<float>> way) {
        Path path;

        float xA, yA, xB, yB;

        xA = way[0][0];
        yA = way[0][1];
        xB = way[1][0];
        yB = way[1][1];

        path.addLineSegment(getLine(xA, yA, xB, yB), 1.f);

        for (unsigned int point = 2; point < way.size(); point++) {
            xA += xB;
            yA += yB;
            xB = way[point][0];
            yB = way[point][1];

            path.addLineSegment(getLine(xA, yA, xB, yB), 1.f);
        }

        return path;
    }

```

> [@danielrudrich](#):
>
> You might want to test it with one of the examples the others posted above

i did, but i already failed at closing a subpath. the method closeSubPath() just doesn’t do anything. it is supposed to add the last line to the path, that goes back to the start, but it just doesn’t do that. not even in a fresh project.

> [@matkatmusic](#):
>
> Sounds like you don’t understand how to create a path properly.

that’s not impossible. however, i find it more likely that closeSubPath() is just not working properly for some reason. or else i’d see it adding a line when i fill or stroke the path, wouldn’t i?

---

<div class="post-metadata">

**Author:** ![cpr2323](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/cpr2323/32/18682_2.png) [@cpr2323](https://forum.juce.com/u/cpr2323)\
**Post date:** [January 31, 2020, 8:54pm UTC](https://forum.juce.com/t/fillpath-doesnt-fill-path/37391/17 "2020-01-31T20:54:43Z")

</div>

We have all shown you examples of us successfully creating and filling paths, using closeSubPath() as part of the process. I find it more likely that you are doing something wrong.

---

<div class="post-metadata">

**Author:** ![matkatmusic](https://avatars.discourse-cdn.com/v4/letter/m/dfb087/32.png) [@matkatmusic](https://forum.juce.com/u/matkatmusic)\
**Post date:** [January 31, 2020, 8:54pm UTC](https://forum.juce.com/t/fillpath-doesnt-fill-path/37391/18 "2020-01-31T20:54:57Z")

</div>

> [@hdlAudio](#):
>
> however, i find it more likely that closeSubPath() is just not working properly for some reason

lol no. it definitely works correctly.

stop using your function for a bit, and create your path normally the way we have all shown you. See if that gets you where you want to get to.

---

<div class="post-metadata">

**Author:** ![Mrugalla](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/mrugalla/32/13092_2.png) [@Mrugalla](https://forum.juce.com/u/Mrugalla)\
**Post date:** [January 31, 2020, 9:07pm UTC](https://forum.juce.com/t/fillpath-doesnt-fill-path/37391/19 "2020-01-31T21:07:12Z")

</div>

ok i finally got it working. i gotta admit you were right that i didn’t understand paths correctly. but in my defense the path-class can be extremely misleading! i mean… it gives you the option to add line-objects but if you do that you can’t use closeSubPath() anymore, because the path doesn’t know anymore that its lines belong together. why are these methods even in the path-object at all if they only reduce its functionality drastically? however. thank y’all for helping me out again \<3

here’s code that works in case anyone else googles paths while having my exact problem and finds this post:

```
Path path;
    path.startNewSubPath(20, 20);
    path.lineTo(20, 200);
    path.lineTo(200, 200);
    path.closeSubPath();

    g.setColour(Colours::grey);
    g.fillPath(path);

    g.setColour(Colours::yellow);
    g.strokePath(path, PathStrokeType(2.f));
```

---

<div class="post-metadata">

**Author:** ![daniel](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/daniel/32/790_2.png) [@daniel](https://forum.juce.com/u/daniel)\
**Post date:** [January 31, 2020, 9:51pm UTC](https://forum.juce.com/t/fillpath-doesnt-fill-path/37391/20 "2020-01-31T21:51:45Z")

</div>

> [@hdlAudio](#):
>
> why are these methods even in the path-object at all if they only reduce its functionality drastically?

The path cannot know, if you want to display separate line segments or a polygon. And it is not the path’s job to check, if vertices of your line segments accidentally coincide.

The path is to bundle an arbitrary amount of drawing primitives together, heavily used in SVG rendering, font rendering and many more places. And it makes it easy to keep them tied together and apply transformations on the whole.

[Next page](https://forum.juce.com/t/fillpath-doesnt-fill-path/37391.md?page=2)