2

I am following this guide which contains a brush and eraser functionality. The guide's code sets the "globalCompositeOperation" to "destination-out" and basically ends up creating another line that will cover whatever you have drawn before with the brush. This would work pretty well in some cases, but if I made my "destination-out" lines not-draggable and the "source-over" lines draggable, then if I drag the "source-over" lines around the canvas these lines would still be intact and it would not look like as if they were erased.

In a better attempt to explain my problem, I provide you this example: If I were to create two parallel lines, line1(x1,y1) and line2(x2,y2), and then I decide to draw a "destination-out" line in the middle of both, is there a way I can keep that "erased" part in the middle of line1 and line2 if I were to move one of the lines away from the "destination-out" line?

I'm sure it is not like this, but is it possible to change certain points inside the line as "destination-out" while the rest of the points are "source-over" If not, how can we simulate this action without having to create a long static extra "destination-out" line?

elco45
  • 220
  • 1
  • 11
  • 1
    Why not combine the visible line and the erasing line as a group. Put another way, when the first line is added to the canvas make it part of a new group. When the erasing line is drawn, add it to the same group. Make the group draggable. Regarding erasing points, you would need to run collision detection to determine and overlap then not only remove the affected points but also break the line into line-segments. An interesting project. – Vanquished Wombat Oct 29 '20 at 07:49
  • That sounds like an interesting proposal that might work. Are you aware if there a way for me to detect the areas where the "destination-out" line is not touching anything else so that I can somehow remove these unused lines and merge only the intersections? Thanks again for that comment, it might even be the answer if I can somehow only get the collided sections. – elco45 Oct 29 '20 at 23:34
  • I think it is something very hard to achieve. You need to make each line very independent of each other. I think the only good way for that is to create an external canvas for EVERY line. So all erasing actions are not affecting other lines so you can easily drag them. – lavrton Nov 10 '20 at 20:12
  • 1
    @lavrton would this be useful to simulate what this question is asking for? (https://stackoverflow.com/questions/64691527/how-can-i-get-the-intersection-of-three-shapes-colliding-and-delete-the-parts-th) – Promo Otter Nov 11 '20 at 17:57

0 Answers0