Looking for drawing solutions for overlapping shapes

I've made a patch that changes the angles of 4 right-angled triangles within a square. The thing I don't like is that drawing a side of the triangle at the same coordinates as side of the square can result in some not so aesthetically pleasing results. The corner of the triangles stick out from the corners of the square. You can see what I mean in the patch:


Is there any way to stop this from happening? I'm not sure if I'm doing something wrong in my calculations or if using the rect() and triangle() objects are sufficient. Would making my own vector-based shape be a way of rectifying this?


  • It seems like the lines are extending further from the corners in certain configurations. it doesn't help you have a thick line. I would suggest you work with the thinnest line first to make sure the corners overlap at all times before you increase the thickness.


  • edited May 2017

    As an update, using strokeJoin(ROUND) stopped the triangle corners from sticking out. I've updated the link above to show this. This shall do for now.

  • If you run your code with strokeWeight(1), you will see there is an offset that could be causing your problem. Did you try it?


Sign In or Register to comment.