BPP and createArrayBuffer changing colours

Hi All,
I'm hoping someone can help me understand BPP better. I'm testing out a simple animation, based on the Slope Clock, to slide the current contents of the screen off, and show a new screen. I've had this running in the emulator, but some of the colours are wrong.

It should show BLACK text (wibble) on GREEN, then replace it with WHITE text (flibble) on RED.
When I take a screenshot of the screen with g.asImage, and put it in the image buffer with drawImage, the colour changes from GREEN to BLUE.

I'm sure it's a simple fix somewhere, but I'm stuck!

This is the code I've been trying:

let g2 = Graphics.createArrayBuffer(g.getWidth() * 2, g.getHeight(), 8, {msb:true});
let g2img = { width:g2.getWidth(), height:g2.getHeight(), bpp:8, buffer:g2.buffer };

let R = Bangle.appRect;
let x = R.w / 2;
let y = R.y + R.h / 2;

let animInterval;

let animate = function(step) {
  if (animInterval) clearInterval(animInterval);
  slideX = -g2.getWidth()/2;
  animInterval = setInterval(function() {
    slideX += step;
    let stop = false;
    if (slideX>=0) {
      slideX=0;
      stop = true;
    }
    g.drawImage(g2img, slideX, 0);
    if (stop) {
      clearInterval(animInterval);
      animInterval=undefined;
    }
  }, 50);
};

g.reset().setBgColor("#0f0").clearRect(R­); // clear whole background
g.setFontAlign(0, 0).setFont("Vector:30").drawString("WIBB­LE", g.getWidth()/2, g.getHeight()/2);
let screengrab = g.asImage();

// Draw to offscreen buffer
g2.setColor("#f00").fillRect(0,0,g2.getW­idth(),g2.getHeight());
g2.setColor("#fff").setFontAlign(0, 0).setFont("Vector:30").drawString("FLIB­BLE", g2.getWidth()/4, g2.getHeight()/2);
g2.drawImage(screengrab, g2.getWidth()/2, 0);

animate(3);

3 Attachments