blendMode = 'destination-out'; produce white backgroud

[satham-J]

I just want remove the selected area like using eraser or just drawing path that will remove the existing fill. I Just try to use blendMode = 'destintion-out'. It produce white color. I just want same like this http://jsfiddle.net/ArtBIT/WUXDb/1/ Currently I got this http://sketch.paperjs.org/#V/0.11.8/S/hZFBawIxEIX/StgeVsFNsoqLbvHUc6HYYy0Sd0dNXTNhklWK+N+brN0iXhqYQ94b5n3JXBKjjpCUyfsBfLVPRkmFdbyzkyJGynkgtmAGzswqC8SXnTS4OGypgpKle+9tKcSOWotVMAk5OHG2WYXGg/GitQ2q2omxzAshx0IHmTRSBkfrvzNCPK4nczlb54WU61kx5192l16HzytamV8EbtFpr9Es2EnDmVcQh3QdsTpWqLwyuwZ+cd+U3/NlLw46CUP2YCpHbCqHI3YnRW0i5fAW+jeKb3XTvGCDtEgJ6vTBjY89wKN/Xz3Yf0x5BMgfqIogjqc9VDfnHuhpu5Xh3EJZT8Y3DZj6NSwxZKY1OK+Nij+XYetvvWHJGwJ1sDHFJeXH5/UH

[sapics]

path.subtract would help your issue. Is this what you want?

http://sketch.paperjs.org/#V/0.11.8/S/hZJda8IwFIb/Sugu2oJNUkXRDq92PRjucg6J7VE725xwmipD/O9Lqo7SXSyQQJ4T8j75uARa1RBkwfsRbH4IRkGOhZ+zkyJGqrFAbMk0nJlRBoivOhRdGmwph4yFB2tNJsSeWoO5KxJyaMTZJDlqC9qK1lSoikaMZToTcixKh6lESqA29jshxHozWcj5Jp1JuZnPFvzL7MNr/Lymtb4rcINNaUvUS3Yq4cxz8Jt0K3zvXCG3Su8ruOu+KXvgqweMOoQuO5rKEZvKeMR6yLOJlPEt9Hcrviur6gUrpGVIUISDqj/sEYb1vtB/LqkPTgc2MwfH075M3+Npt5Ou3bKYH4Tosvi2Al28uudzqWEBjS218neWYGv/qLdbSyq3kUfxbw5BjSeIhtfwwJ66L7IlUEfjXZsg+/i8/gA=

[satham-J]

same like that but i cant get the element rectangle name. so using subtract make me difficult. there will various shape with fill. then i will draw combined path. it should remove fill inside the combined path.

[sasensi]

It's a little bit tricky, but you can achieve it by wrapping your mask and your cutting paths in a group and playing with blend modes. Look at this sketch:

// First draw an image as background.
var background = new Raster({
    source: 'http://assets.paperjs.org/images/marilyn.jpg',
    onLoad: function() {
        // Make it fill all the screen.
        this.fitBounds(view.bounds, true);
    }
});

// Draw a rectangle to hide the background.
var maskBase = new Path.Rectangle({
    rectangle: view.bounds,
    fillColor: 'white'
});

// Prepare a group to store the paths that will make the background appear.
var paths = new Group({
    blendMode: 'destination-out'
});

// Assemble both previous element in a group in order to make it display as we need.
var mask = new Group({
    children: [maskBase, paths],
    blendMode: 'source-over'
});

// Create a variable that will store the currently drawing path.
var path;

// On mouse down...
function onMouseDown(event) {
    // ...create a new path and add it to the paths group.
    path = new Path({
        strokeColor: 'black',
        strokeWidth: 40,
        strokeJoin: 'round',
        strokeCap: 'round',
        parent: paths
    });
}

// On mouse drag...
function onMouseDrag(event) {
    // ...add point to the current path.
    path.add(event.point);
}

// Draw instructions.
new PointText({
    content: 'Drag you mouse to make the background image appear.',
    point: view.center,
    justification: 'center'
});

[sasensi]

I close this issue because there is nothing to fix in the library.