How to add groupCanvas to accordion in controlP5?

Processing Libraries
1

I want to create canvas and draw something in the group, and I also want to make these group to shrink and arrange like “Accordion” class. But these too seems can’t work together. Is there any other way to make it work? Or is there any other similar methods?

Here’s the code.


import controlP5.*;
  
ControlP5 cp5;
Accordion accordion;
void setup() {
  size(400,600);
  smooth();
  
  cp5 = new ControlP5(this);
  Canvas g1 = cp5.addGroup("myGroup")
             .setLabel("Testing Canvas")
             .setPosition(100,200)
             .setWidth(200)
             .addCanvas(new TestCanvas())
             ;
 // You can delete these accordion code to let this work
  accordion = cp5.addAccordion("acc")
                 .setPosition(40,40)
                 .setWidth(200)
                 .addItem(g1)
                 ;
}

void draw() {
  background(0);
}


class TestCanvas extends Canvas {
  
  float n;
  float a;
  
  public void setup(PGraphics pg) {
    println("starting a test canvas.");
    n = 1;
  }
  public void draw(PGraphics pg) {
    n += 0.01;
    pg.ellipseMode(CENTER);
    pg.fill(lerpColor(color(0,100,200),color(0,200,100),map(sin(n),-1,1,0,1)));
    pg.rect(0,0,200,200);
    pg.fill(255,150);
    a+=0.01;
    ellipse(100,100,abs(sin(a)*150),abs(sin(a)*150));
    ellipse(40,40,abs(sin(a+0.5)*50),abs(sin(a+0.5)*50));
    ellipse(60,140,abs(cos(a)*80),abs(cos(a)*80));
  }
}