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: