Path and Curve don't have a fill and only a stroke?

[strich]

It seems Paths and Curves are made up only of stroke components? The documentation is unclear and trying to create one that has a fill color and a stroke outline color fails. I initially spent some time trying to change the color of a path assuming the fill property was the correct one given that that is how the other shapes work.

[jonobr1]

Hmm, do you have an example that you can share the elaborate on this issue better? Curves are paths with a boolean set to auto calculate the bezier handles for you. Stroke and fill should work and look something like this:

path.stroke = 'red'; // Any CSS string value like a hex or rgb / rgba works
path.fill = 'blue';  // Again any CSS string value works here
path.curved = true; // This makes it a curve instead of straight lines

[strich]

Code:

    var path = two.current.makePath(200, 200, 250, 280, true);
    path.fill = 'blue';
    path.stroke = 'red';
    path.cap = 'round';
    path.linewidth = 30;
    path.curve = true;

If I comment out the stroke color it will go black. The fill color seems to be never used.

[jonobr1]

That's because your path only has 2 points. You need to have at least 3 points to fill the hull of a path.

[strich]

Added another point:

[strich]

Hang on. Ah. I see. A Path is NOT what I thought it was. Or rather, the way it works is not as I thought. My goal here has been to draw a line, which in Two.js needs to be a curve or path with noFill().

[strich]

Here is an example of what I was trying to accomplish:

    var path = two.current.makeCurve(200, 200, 250, 280, 250, 350, true);
    path.stroke = 'red';
    path.cap = 'round';
    path.linewidth = 30;
    path.curve = true;
    path.noFill();
    var path2 = two.current.makeCurve(200, 200, 250, 280, 250, 350, true);
    path2.stroke = 'blue';
    path2.cap = 'round';
    path2.linewidth = 20;
    path2.curve = true;
    path2.noFill();

[jonobr1]

Looks cool! Also, path.curve isn't a property. makeCurve and makePath create the same Two.Path object with one difference the path.curved with a "d" at the end is set to true for the curve. Nice work!

[strich]

Weird I wonder why it didn't create any error calling curve. Anyway thanks - If you do have any time I could imagine this issue could result in some additional documentation on the website. However I think I'll close this one for now.

[jonobr1]

Noted, thanks!