How to correctly/cleanly draw SVG graphics using ProcessingJS?

Question

I'm getting started with ProcessingJS and I'm currently playing with SVG a bit. Unfortunately I've ran into a strange behaviour displaying SVG. Here is the output:

and here is the code that produces that:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://cloud.github.com/downloads/processing-js/processing-js/processing-1.4.1.min.js"></script>
<script>
$(document).ready(function() {  
    $('body').append($('<canvas id="preview"><p>Your browser does not support the canvas tag.</p></canvas>'));
    function onPJS(p) {
        var glasses;
        p.setup = function(){
            glasses = p.loadShape("brighteyes.svg");
            p.size(Math.floor(glasses.width), Math.floor(glasses.height)+Math.floor(glasses.height * .25));
            //p.shape(glasses,0,0);
            p.frameRate(1);
        }
        //*
        p.draw = function() {
            p.background(32);
            p.shape(glasses, 0, 0);
            console.log(p.mousePressed);//prints undefined
        };
        //*/
    }
    new Processing(document.getElementById("preview"), onPJS);  
});
</script>

I'm experiencing this odd rendering (renderer seems to place a vertex at 0,0 for the shape) on OSX 10.8 on Chrome Version 26.0.1410.65 (but not on Safari (6.0 (8536.25))). You can run the code here.

How do I get read of these weird rendering bug ?

There is another unexpected thing happening: mousePressed prints undefined, but might address that in a different question.

Answer 1

Processing's support for SVG is patchy. You should probably just report the bug at https://github.com/processing-js/processing-js/issues/new, and then use a PNG copy instead.

NB: renders OK on Firefox 35.

Edit: reported for you. https://github.com/processing-js/processing-js/issues/137

GoToLoop at the above link says that your problem with mousepressed is caused by the fact that to avoid name collisions in JS, the boolean mousepressed is called __mousePressed in JS. They recommend that you use Java syntax to code your app and have it automatically translated into JS, to avoid these gotchas.

Result: just update Chrome, which you've probably done anyway now.