How to draw a curve?

24 views
Skip to first unread message

Richard JE Cooke

unread,
Dec 23, 2021, 4:51:12 AM12/23/21
to Paper.js
I can draw shapes and lines with no problem, but can't see how to draw curves.

This code shows nothing on the screen:

p.project.currentStyle.strokeWidth = 10;
p.project.currentStyle.strokeColor = 'red';
new p.Curve(new p.Point(100,10), new p.Point(50,40), new p.Point(150,70), new p.Point(100,100));

//even adding this does nothing:    new p.Path(c);

What am I doing wrong please?

Richard JE Cooke

unread,
Dec 23, 2021, 5:06:02 AM12/23/21
to Paper.js
I figured out you can't use curves, you have to use something called a segment, which I don't understand, but that's ok.

But this code draws the black line show below, when I expect it to draw the red line:

    const c = new p.Curve(new p.Point(100,10), new p.Point(50,40), new p.Point(150,70), new p.Point(100,100));
    const path = new p.Path(c.segment1, c.segment2);

Untitled.png
since my first curve influence point is left of the start I expect the to start off moving left. Why does it not please?

Richard JE Cooke

unread,
Dec 23, 2021, 7:09:43 AM12/23/21
to Paper.js
Right!  After much experimenting with curve handles and playing in Inkscape I see that the handle positions are RELATIVE, not absolute: https://medium.com/@bragg/cubic-bezier-curves-with-svg-paths-a326bb09616f

This is not mentioned anywhere in the paper.js reference or tutorials. How do I obtain the documentation please?

Richard JE Cooke

unread,
Dec 23, 2021, 7:10:25 AM12/23/21
to Paper.js
*update the documentation*

asensi...@gmail.com

unread,
Jan 6, 2022, 4:14:41 AMJan 6
to Paper.js
A bit late but you indeed found the cause of the issue.
The fact that handles coordinates are relative to the point are actually mentioned in the Segment documentation.
But maybe this could be precised in one of the tutorials.

Reply all
Reply to author
Forward
0 new messages