I whipped up a little proof of concept sketch in Processing. It's a drawing program that uses Processing's mask() function.

Works fine in Java mode, not fine in Javascript mode. I can see one of the images, but not the one effected by the mask functionality. Is it possible that I can't use that filter? Or any filter, for that matter? I've been having trouble running many different examples in Processing.js, so I'm not really sure what the limitations are.

Tested on newest version of Processing, 2.0.3, on Win8 in Chrome and IE.

2. /* @pjs preload="leaves.jpg, moonwalk.jpg"; 
3.  */
4. 
   
6. PGraphics maskPattern;
7. PGraphics savedImg;
8. PImage img;
9. PImage img2;
10. 
    
11. int displayImageX;
12. int displayImageY;
13. 
    
14. float scaleFactor;
15. float centerScaledAdjustedXpos;
16. float centerScaledAdjustedYpos;
17. 
    
18. void setup() {
19.   img = loadImage("moonwalk.jpg");
20.   size(800,800,JAVA2D);
21.   //640,260
22.   maskPattern = createGraphics(img.width,img.height);
23.   savedImg = createGraphics(img.width,img.height);
24.   img2 = loadImage("leaves.jpg");
25.   
26.   scaleFactor=1;
27.   
28.   displayImageX = width/2;
29.   displayImageY = height/2;
30.   
31.   centerScaledAdjustedXpos=0;
32.   centerScaledAdjustedYpos=0;
33.   
34. }
35. 
    
36. void draw() {
37.   
38.   pushMatrix();
39.     scale(scaleFactor);
40.   
41.     
42.   background(0);
43.   
44.   imageMode(CENTER);
45.   image(img2,displayImageX/scaleFactor,displayImageY/scaleFactor);
46. 
    
47.     
48.     
49.   if (mousePressed == true) {
50.   maskPaint();
51.   }
52.    
53.   img.mask(maskPattern);
54.   
55.   image(img,displayImageX/scaleFactor,displayImageY/scaleFactor);
56.   
57.   
58.   
59.   
60. popMatrix();
61. 
    
62.   
63. }
64. 
    
65. void maskPaint(){
66.   
67.   
68.   centerScaledAdjustedXpos = ((mouseX-displayImageX)/scaleFactor+(maskPattern.width/2));
69.   centerScaledAdjustedYpos = ((mouseY-displayImageY)/scaleFactor+(maskPattern.height/2));
70.   
71.   maskPattern.beginDraw();
72.   maskPattern.stroke(255);
73.   maskPattern.fill(255);
74.   //maskPattern.ellipse(mouseX,mouseY,50,50);
75.   //maskPattern.ellipse(((mouseX-(displayImageX))+(maskPattern.width/2)), ((mouseY-(displayImageY))+(maskPattern.height/2)), 50, 50);
76.   maskPattern.ellipse(centerScaledAdjustedXpos, centerScaledAdjustedYpos, 50, 50);
77.   
78. 
    
79.   
80.   
81.   maskPattern.endDraw(); 
82.   
83. println(centerScaledAdjustedXpos + ", " + centerScaledAdjustedYpos);
84. }
85. 
    
86. 
    
87. 
    
88. 
    
89. 
    
90. 
    
91. 
    
92. void keyPressed() {
93.    if(key == 's')
94.     {
95.       savedImg.beginDraw();
96.         savedImg.image(img2,0,0);
97.         img.mask(maskPattern);
98.         savedImg.image(img,0,0);
99.       savedImg.endDraw();
100.       
101.     savedImg.save("final_image.jpg");
102.     }
103.     
104.   if(key == ' '){
105.   maskPattern.clear();
106.   }  
107.     
108.   
109.   if (key == '-') {
110.     println("minus ");
111.     
112.     
113. //    srcImage.width--;
114. //    //maskImage.width--;
115. //    bgImage.width--;
116. //    srcImage.height--;
117. //    //maskImage.height--;
118. //    bgImage.height--;
119.     
120.     //background(0);
121.     
122.     scaleFactor=scaleFactor-.01;
123.     
124.   }
125.   if (key == '=') {
126.     println(img.width/2);
127.     
128.     scaleFactor=scaleFactor+.01;
129.     
130.     
131.   }
132.     
133. }