Masking the alpha channel in Processing.js - making transparent areas in canvas

Question

I am playing with transparency in canvas with Processing.js. After reading this tutorial:

http://www.adamtindale.com/blog/processing/129/

and based on this sketch:

http://www.openprocessing.org/sketch/74380

I want to create following thing: canvas must be filled with some color and some parts of it must be transparent (to see the website below in only these places).

I thought that this could be simply done by blending PGraphics in MULTIPLY mode. The area I want to cut off is filled with color(0,0,0,0) in mask Pgraphic so after multiplying with anything it should stay (0,0,0,0) - namely transparent.

Nevertheless I can't get it working. The code I use:

PGraphics g;
void setup()
{
  size( 720, 480);
  // create the mask
  g = createGraphics(width,height, P2D);
}  

void draw()
{
  externals.context.clearRect(0,0,width,height);// part of the canvasAPI that creates a clear rect

  fill(244,90,10,40);
  rect(2,2,300,300);

  // draw the mask
  g.beginDraw();
  g.stroke(255);
  g.fill(0,0,0,0);
  g.ellipse(100,100,150,150);

  g.endDraw();

  // apply the mask to the screen
  blend(g,0,0, width,height, 0,0,width,height,MULTIPLY);
}

This code should result in semi-transparent orange rectangle with circular hole (ellipse).

Is there anything I am missing or this is the totally wrong way?

Tested in Google Chrome and Opera. Kubuntu 12.04.1

The result I get:

Answer 1

You are missing this line above your setup()

parent.document.getElementById("yourDivID").setAttribute("style", "background-color:transparent; border:0px;");

This will tell the div of the iframe to be set to transparent.

Note: be sure to replace "yourDivID" for the real ID of your div.