Dealing with groups of primitives

[welp]

Hi everyone, I'm working on my first Pixi.js project and I have a question about handling groups of primitives, as well as clearing them out when I'm done with them.

 

As you can see in the attachment, I'm drawing a background of a guitar fretboard, and then drawing markers on it to indicate notes. However, right now I'm doing it in an incredibly naive way, just looping through my data and drawing a new marker at the calculated position. I'd like to have all markers of a certain color in a "layer" of sorts, so I can selectively make a layer visible or invisible. Additionally, the way I'm doing things right now doesn't work well because if the user selects a new scale to display, the old markers stay in place and make the output unusable (I haven't implemented any way to clear things yet). 

 

Any tips on how to accomplish what I'm looking for? Thanks!

 

[xerver]

You can draw many shapes with a single Graphics object. Each "group" of objects you can draw using a single Graphics object, then just hide/show/scale that Graphics object at will.

[welp]

I feel very silly right now, because I somehow didn't realize that Graphics objects were an extension of DisplayObjectContainer. So I can use a handful of Graphics objects and toggle their visibility to act as layers and I can just call the clear() method to wipe everything once I'm done.

 

I thought it was going to be much harder to do what I wanted, should have read more carefully 

 

Thanks for the help, it put me on the right track!