CODEWITHSUNDEEP
javascriptnode.jscanvaspaperjsdrawing2d
Luke
Luke

Reputation: 133

Paper.js eraser tool made using layers and blendMode

I am making simple drawing app using Paper.js and Node.js. There are 2 layers: - bottom layer with images - top layer for drawing. Layer with images is background to drawing layer.

I want to make a simple eraser tool which will erase drawing on a path. I'm trying to do it adding second path in my top layer which has blendMode set to "destination-out". 

drawingLayer.activate();
path = new Path();
path.strokeColor = 'black';
path.strokeWidth = 5;

if (mode == "erase") {
  path.strokeWidth = 15;
  path.blendMode = 'destination-out';
}

My problem is that this "destination-out" path erases not only everything on top layer (drawing layer) but also everything on the bottom layer (images). Of course I want images to stay untouched by eraser. When I set some background in css for my page it is not erased by the eraser path.

Do you know a way to make eraser to modify one top layer while not modyfing bottom layer?

Upvotes: 2

Views: 1836

Answers (2)

sasensi
sasensi

Reputation: 4650

In order to do this, you have to encapsulate your drawings items and your eraser items into a group which has the blend mode source-over. This way, the background items won't be affected by the eraser items destination-out blend mode. Here's a simple sketch demonstrating this.

const backgroundCircle = new Path.Circle({
    center: view.center,
    radius: 50,
    fillColor: 'orange'
});

const foregroundCircle = new Path.Circle({
    center: view.center + 20,
    radius: 50,
    fillColor: 'blue'
});

const eraserCircle = new Path.Circle({
    center: view.center + [10, 0],
    radius: 50,
    fillColor: 'black',
    blendMode: 'destination-out'
});

const foreground = new Group({
    children: [foregroundCircle, eraserCircle],
    blendMode:'source-over'
});

Upvotes: 0

Oxcarga
Oxcarga

Reputation: 260

The solution is to activate the layer you want to erase in just before using the eraser tool, like this:

var firstLayer = paper.project.activeLayer; //This one is used to erase
var shapesLayer = new Layer(); // We don't want to erase on this one

so basically, when eraser tool is selected I do

firstLayer.activate();

Then when I want to draw shapes just activate the 'shapesLayer' the same way. This avoids the tool (the one used for erasing) touch anything from 'shapesLayer'

Upvotes: 1

Related Questions