Jump to content

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


Recommended Posts


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:



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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...