bezier curves - canvas drawing take notice

[Softcore]

Im pulling my hair out.....why isnt the fill working in the first canvas?

[Phil999]

just wanted to say this stroke Canvas object is genius. Simply beautiful.

About the canvas_fill(). Hmm, I don't know of course, my guess is that there needs to be some other code first. And it may be (talking as a complete ignorant here) that it's not even possible to fill this complex stroke/line/bezier curve. But I'm surely wrong, because I don't understand the Canvas object and coding in general. I will depend very much on your contributions and steal the parts I can manage.

Edit: it may be that the fill works only with canvas_lineTo(). canvas_bezierCurveTo() can be used with stroke thickness, and variables for changing the curve.

[Softcore]

Im not a programmer either...Im just doing my general procedure of learning stuff....reeading and applying! lol

Stumbling across many of obstacles in the way though!

[Phil999]

scratching my beard myself. But from what I've gathered, from the examples, there's rectangles and circles that can be filled. A complex spline can be filled with size and thickness. Haven't tried it out myself, and I repeat, it's only a guess from an ignorant.

But I want to repeat, this Lemur logo is brilliant. Well done, to say the least.

[Softcore]

This might be the case, as you say...but then.....why do we want the curves after all????

pfffffffff.....

http://www.html5canvastutorials.com/tut ... hape-fill/

[Phil999]

I see. Haven't looked at or known html5 examples in my life.

Hmm, I think it's only rectangles and lines that can use canvas_fill(). Circles can be "filled" with the canvas_createRadialGradient() command. Lots of options though. We just need to learn the specific new Lemur commands which appear to be a bit different to html5.

[Macciza]

Hi
Yeah I did a logo a few days ago and hit the same issue . . .
Some standard canvas features are not fully implemented but are being worked on for next release.
Fill of curves is one of them , the only fill in certain ways currently ...
There are a few others and we simply have to deal with it until the updates come through

Most of the stuff seems to have pretty direct correlation to html5 code
I have converted a number of canvas tutorials to Lemur ...

Will have to compare our logos, but have net issues at home currently
MM

[Softcore]

Ok an update on this....Im starting to grasp the whole logic of canvas drawing so I thought of posting here in case others dont get it at first.....

First of all...consider the basics..... lets draw a "square" by using these lines and coordinates
canvas_moveTo(c,100,100);
canvas_lineTo(c,200,100);
canvas_lineTo(c,200,200);
canvas_lineTo(c,100,200);

and lets say we instruct then our Canvas to fill the square.....BUT WAIT....no...its not a square...as far as canvas is concerned...its just a path......So fill what?

the square? ORRRRR the outside space of the square?

Yes, you human, immediately say, wll what are you blind...thats a square over there I see it! yes thank you, I do too.....but its a PATH....
So, canvas doesnt really know WHAT to fill, unless there is a reference on what is the "outside" and what is the "inside" of a close path.

So....
Without further comments

THIS is a square
canvas_moveTo(c,100,100);
canvas_lineTo(c,200,100);
canvas_lineTo(c,200,200);
canvas_lineTo(c,100,200);

and THIS is the same square, visually it is EXACTLY the same, and in the same position - the ONLY difference is that I chose to start the path from bottom-right corner, instead of top-left
canvas_moveTo(c,200,200);
canvas_lineTo(c,200,100);
canvas_lineTo(c,100,100);
canvas_lineTo(c,100,200);

The FIRST aquare CAN be filled...the second....NOT.

Here are the examples

square-clockwise.jzml

(1.04 KiB) Downloaded 136 times

square-ccw.jzml

(1.04 KiB) Downloaded 132 times

[Softcore]

Now it becomes clear, that the software, assumes whats "right" and "down" from our initial point of path as the future "internal" or "fillable" area....so if we draw from that point up and left....the "fillable" area is not the shape we've drawn anymore....but the outside of it, and it cant fill it.

SO, I thought the same applies to berzier curves....and when I started my shape with berzier curves I made sure I was doing it the "correct" way, i.e. start with its top-left corner and go clockwise.....though the resulting shape was STILL not filling.

After trial and error, it appears to me...that in the case of berzier curves (and arcs for that matter)...an ADDED logic is applied besides the "clockwise" logic which is still applied.... The "inward" area of the shape to be drawn is defined by the x1,y1, x2, y2 reference points. At first I thought these were just "handles" to provide an easy means to ANY curvature....Its not like so though when you plan to fill a shape. If you do, the "fillable" area will always be the one that the x1,y1,x2,y2 points define as a shape with convex NOT concave.
Notice that this means, that both these 2 points have to define one and only one "side" else the Fill will not occur - long story short, you CAN NOT make a "wave" shaped side of a path you plan to fill, and hope that it will be filled. You cvannot even make a "concave" shape and hope to fill the shape.

Here are the examples....NOtice on the third canvas....that even though Im moving clockwise...STILL the shape is not filled

berzier-examples.jzml

(2.5 KiB) Downloaded 124 times

[Softcore]

Finally I keep wondering...is this how the html canvas works too? If so, why the hell not ONE bloody document from the douzins I 've read so far do not explain the concept? I understand the Liine team cannot re-invent the wheel and re-post documentation for canvas since its already out there.....but.....I've spend 6 days, to understand stuff that can be easily described in two forum posts....I may have the will to learn and UNDERSTAND bu dont take this for granted for all users...

A reference of all these slight details that can make us pull our hair out should be the first thing to take care before releasing such, great nevertheless, updates.