CODEWITHSUNDEEP
javascriptcanvashtml5-canvaspaperjs
TheOne
TheOne

Reputation: 11159

Erase a path in paper.js?

I basically want to create a new path with the canvas globalCompositeOperation set to 'destination-out'. Is this possible? If so, how?

I noticed that Item has a blendMode property: http://paperjs.org/reference/item#blendmode, but trying the different values does not provide the desired effect.

Upvotes: 1

Views: 6663

Answers (2)

SoluableNonagon
SoluableNonagon

Reputation: 11755

http://jsfiddle.net/D8vMG/12/

In light of your recent comment, you would need to create layers, as described here:

http://paperjs.org/tutorials/project-items/project-hierarchy/#removing-items-and-children

and then you can add your paths to a layer and do something like this:

 //add image to project as background
 // ... your code here ...

 var secondLayer = new Layer();

Whenever you create a new Layer, it becomes the active layer of the project, and then you can draw on top of the second layer all you want.

if you want a simple 'undo' button you can do:

 function onMouseDown(event) {
     if (window.mode == "drawing") {
        myPath = new Path();
        myPath.strokeColor = 'black';
     }
     else if (window.mode == "undo") {
        myPath.opacity = '0'; //this makes the last path used completely see through
        // or myPath.remove(); // this removes the path.
        //if you're intent on something that writes and erases, you could do 
     }
 }

But what you are looking for is something like this:

 function onMouseDrag(event) {
   if (window.mode == "drawing") {
     myPath.add(event.point);
   }
   else if (window.mode == "erasing") {
     myPath.removeSegment(0);
   }
 }

this erases the segments of the path from beginning to end. For the full functionality, you need something that identifies a path on click, (layer.getChildren() ? then select child). Then using the point on mouse move you need to identify the segment index and remove it from the path using .removeSegment(index).

http://paperjs.org/reference/path#removesegment-index

Upvotes: 1

SoluableNonagon
SoluableNonagon

Reputation: 11755

Well, the simple solution would be to just create a path which is white. http://jsfiddle.net/D8vMG/11/

function onMouseDown(event) {
    if (window.mode == "drawing") {
       myPath = new Path();
       myPath.strokeColor = 'black';
     }
     else if (window.mode == "erasing") {
        myPath = new Path();
        myPath.strokeColor = 'white';
        myPath.strokeWidth =  10;
     }
}

Upvotes: 0

Related Questions