Using Mask in processing.js

Question

I'm pretty new with Processing.js and I was wondering why this simple mask is not working? I mean, I can display the image and the mask without any problem, but as soon as it reach the line img1.mask(mask1); everything stop working.

/* @pjs preload="resources/images/1.jpg, resources/images/masks/1.jpg"; */
void draw(){  
    PImage img1 = loadImage("resources/images/1.jpg");
    PImage mask1 = loadImage("resources/images/masks/1.jpg");
    img1.mask(mask1);
    image(img1, 0, 0);
}

I have read http://processingjs.org/reference/PImage_mask_/, but I don't see what i'm doing wrong :S Anyone have an idea ? Thanks

Answer 1

I've tried your code from jsfiddle and it's working with Processing.js 1.3.6.
Note that you have to run it from a web server, opening the html file from the filesystem will give you the blank canvas in Chrome or just the text in Firefox.

_{If you don't have an access to a web server you can install one on your own computer (XAMPP is good and multiplatform, I personally use WAMP on Windows)}

Answer 2

The code is actually working great, but only in Processing, not in Processing.js even though this fonctionnality appear in both reference pages http://processingjs.org/reference/PImage/