Hi folks,

I am having trouble drawing to two canvases in one window where the canvases need to be updated or refreshed at different times.  The problem lies in the fact the calling background(0) in the draw() function of the main program or the canvas classes causes at least one canvas to be refreshed incorrectly.

In the example below, I have one canvas, CubeCanvas, that contains a cube capable of rotating.  Naturally, I would like this canvas to refresh (or redraw) at each iteration of draw().  I have a second canvas, GraphCanvas, that contains a random bar graph where I would like to add bars to the graph over time, and then reset this canvas to start over when the bar graph completely fills the width of the window.  

In this case, calling background() from either the main program or CubeCanvas prevents the bar graph from filling the width of the window.  Calling background() from GraphCanvas does not allow the cube in CubeCanvas to update quickly enough, which causes the cube to smear.

The canvas class itself does not have functions to address this, and I have been unsuccessful trying to get access to the canvases' underlying groups and manipulating the groups' background colors (this seems to only affect a group's bar color).  Also, I have not been able to find issue already addressed in the forum.   

I have the feeling that there is a simple solution, but that I'm just not seeing it.  So, if anyone has any suggestions, I would greatly appreciate it (before I switch over to having to use control windows or some sort of array for the bar graph).  The sample code is below.

1. import controlP5.*;
   import processing.opengl.*;
   
   ControlP5 cp5;
   Slider2D slider;
    
   void setup() {
     size(400,600, OPENGL);
    
     cp5 = new ControlP5(this);
    
     cp5.addGroup("cubeGroup")
        .setLabel("Cube Canvas")
        .setPosition(200, 20)
        .setWidth(200)
        .addCanvas(new CubeCanvas())
        ;
    
     cp5.addGroup("graphGroup")
        .setLabel("Graph Canvas")
        .setPosition(0, 350)
        .setWidth(400)
        .addCanvas(new GraphCanvas())
        ;
      
     slider = cp5.addSlider2D("S2D")
        .setPosition(20, 20)
        .setSize(100, 100)
        .setArrayValue(new float[] {50, 50})
        ;
    
     background(0);
     smooth();
   }
   
   void draw() {
     //background(0);
   }
   
   class CubeCanvas extends Canvas {
    
     color boxColor = color(20, 125, 125);
   
     int boxSize = 50;
    
     public void setup(PApplet p) {
       println("starting a cube canvas.");
     }
    
     public void draw(PApplet p) {
       //p.background(0);  
       p.fill(boxColor);
       p.stroke(255);
     
       pushMatrix();
       translate(100, 100);
       rotateY(map(slider.arrayValue()[0], 0, 100, -PI,PI));
       rotateX(map(slider.arrayValue()[1], 0, 100, -PI,PI));
       box(boxSize);
       popMatrix();
     }
   }
   
   class GraphCanvas extends Canvas {
     
     float barHeight;
     int i;
    
     public void setup(PApplet p) {
       println("starting a graph canvas.");
       barHeight = 0;
       i = 0;
     }
     public void draw(PApplet p) {
       p.stroke(255, 200, 200);
       p.fill(125, 25, 25);
       if (i < width ) {
         barHeight = 350 - random(350);
         rect(i, barHeight, 5, 350-barHeight);
         i+=6;
       }
       else {
         i = 0;
         p.background(0);
       }
     }
   }