Is it possible to erase lines drawn to Pixi.Graphics without touching the texture behind

[StefanRehder]

Hi,

I have been using Pixi.js for a few months now and I am wondering if it is possible to erase lines drawn on a PIXI.Graphics object.

Basically I have some functionality where I am able to draw on a Graphics object on a Sprite using mouse and touch events.

 

My issue is that the sprite has a texture which is not just 1 color.

If the texture was blue I would just draw with blue color to "erase" the lines i had drawn earlier with another color.

 

If I was not using Pixi.js I could use the functionality shown here:

http://cssdeck.com/labs/jwvajze4/

 

This eraser functionality is excactly what I need, but I need it in Pixi.js.

Is it possible to adapt this same functionality in Pixi.js? Any suggestions or tips would be great.

[StefanRehder]

Bonus question: 

• In my code below ctx is null when I write to the console. Why? And is it possible for me to get access to the context element using Pixi.js? 

 

I found the answer to this part myself.

Obviously ctx is null because autoDetectRenderer is returning a WebGLRenderer.

I just changed the test page to use CanvasRenderer and now ctx contains a CanvasRenderingContext2D.

[StefanRehder]

I ended up solving this in a different way.

Instead of drawing directly on the main graphics object I created a Stroke object inheriting from Graphics.

Then I added strokes to the graphics object when drawing.

 

When using erase functionality i just had to remove childs (Stroke objects) from the main graphics element.

This had the desired effect.