2

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?

Luke
  • 133
  • 1
  • 8
  • 2
    How did you end up implementing this feature? I find that even using destination-out on the top layer leaves a white mark over the bottom layer. – Tielman Nieuwoudt Jan 21 '15 at 21:11

2 Answers2

1

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'

Oxcarga
  • 260
  • 3
  • 9
  • If I understand correctly, your images (or you mention shapes, different to what the OP asks) then reside on the top layer - don't they obscure the paths on the bottom layer? – Tielman Nieuwoudt Jan 21 '15 at 21:05
0

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'
});
sasensi
  • 4,610
  • 10
  • 35