Problem with PImage.mask function

Goldwasser

I have a program involving using a PGraphics instance as a mask for a PImage. Works fine in Java mode but mask doesn't work in Javascript mode. I've seen past posts about such problem, and see various entries in processing.js changelogs claiming to fix it. But still no success (and cannot even get a successful workaround).

Relatively simple minimal counterexample as follows. Makes red PImage, and PGraphics mask with white circle on black background. Then tries to apply mask to red image. Tried two ways: using PGraphics directly as the mask; creating PImage as copy of PGraphics and using PImage as mask. Result should appear as:

but when running in processing.js appears as

    void setup() {
      size(400,100);

      // original image colored solid red
      PImage img = createImage(100, 100, ARGB);
      color red = color(255, 0, 0);  
      for (int x=0; x<100; x++)
        for (int y=0; y<100; y++)
          img.set(x, y, red);

      PImage original = img.get(0,0,100,100);

      // mask is black image with white circle in center      
      PGraphics mask = createGraphics(100,100);
      mask.beginDraw();
      mask.fill(255);
      mask.background(0);
      mask.ellipse(50,50,50,50);
      mask.endDraw();

      // This is the command that doesn't seem to work!
      img.mask(mask);

      // This is attempted workaround by first converting PGraphics mask to PImage mask
      PImage workaround = original.get(0,0,100,100);
      PImage newmask = convert(mask);
      workaround.mask(newmask);

      // display results
      image(original,0,0);     // first panel   -- original red PImage
      image(mask,100,0);       // second panel  -- original PGraphics mask
      image(img,200,0);        // third panel   -- attempt to use PGraphics mask
      image(workaround,300,0); // fourth panel  -- workaround with PImage mask
    }

    PImage convert(PGraphics pg) {
      PImage pi = createImage(pg.width, pg.height,ARGB);
      for (int x=0; x < pg.width; x++) {
        for (int y=0; y < pg.height; y++) {
          pi.set(x,y,pg.get(x,y));
        }
      }
      return pi;
    }

Full demo: cs.slu.edu/~goldwasser/processingbug/

Note: I've just also entered this issue in github log as github.com/processing-js/processing-js/issues/149

GoToLoop

[DELETE]