javascript - ProcessingJSを使用してSVGグラフィックスを正しく/きれいに描画するには?

Question

私はProcessingJSを使い始めており、現在SVGで少し遊んでいます。残念ながら、私は SVG を表示する奇妙な動作に遭遇しました。出力は次のとおりです。

そして、これを生成するコードは次のとおりです。

<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>

Chrome バージョン 26.0.1410.65 の OSX 10.8 (Safari (6.0 (8536.25)) ではありません) で、この奇妙なレンダリング (レンダラーが形状の頂点を 0,0 に配置するようです) が発生しています。ここでコードを実行できます。

これらの奇妙なレンダリング バグを読み取るにはどうすればよいですか?

もう1つの予期しないことが起こっています.mousePressedはundefinedを出力しますが、別の質問でそれを解決するかもしれません.