Processingjs quick-tip: Making the main-canvas transparent

With processingjs you can't give the background color an alpha-channel in the main canvas (the Processing-object).

This behavior is inherited from the original Java-based Processing, where this doesn't make sense to have an transparent background.

However it's possible to have this effect, if you want to and I'll show you how:

var el = document.getElementById( "basecanvas" );
var processing = new Processing( el, function( p ) {
    p.setup = function( ) {
        if ( p.externals.sketch ) {
            // This is the flag that make the transparent background possible.
            p.externals.sketch.options.isTransparent = true;
        }
        // Now that you have flagged the sketch as transparent you want make the background fully transparent
        p.background( 0, 0 );
    };
} );

You have to give that anonymous function as the second parameter to the Processing-constructor otherwise the sketch won't be created and you can't set the flag.