linep5.js

Can you change the line ending on p5js

Im working on a project were I need to draw some thick lines. I noticed that by default p5js lines are rounded at the ends. Is there a way to change this behavior?

strokeWeight(50);
line(150,150,300,200);

Image of current vs expected behavior

The only way around I've thought around this would be to use a quad() but Id need to calculate the rotation and use transform, or use multiple lines but Id need to calculate their start and end positions

Is there a better way? I've read the documentation I've also looked for keywords like line endings line caps line mode or something but have found nothing

Any help is appreciated

Solution

  • What you're looking for is the "stroke cap".

    strokeCap(SQUARE);

    https://p5js.org/reference/p5/strokeCap/