jsfiddle here: <http://jsfiddle.net/yw0w18m3/2/>

I'm using paper.js to make a background image that looks somthing like this:

![enter image description here](https://i.stack.imgur.com/vmTM2.png)

Basically, I'm creating a couple thousand triangles over a loop and rotating them on every other iteration.

```
function Tri(x, y, rotate) {
    var tri = new Path([
        new Point((x - 42), (y - 48)),
        new Point((x - 42), y),
        new Point(x, (y - 24)), 
        new Point((x - 42), (y - 48)) 
    ]);

    tri.fillColor = {
        hue: Math.random() * 360,
        saturation: 0,
        brightness: ( (( Math.random() ) * .95) + .3 )
    };

    if(rotate) { tri.rotate(180); } 
}

for (var i = 0; i < 2000; i++) {
    rotate = false;

    if( i % 2 ) {
        rotate = true;
    }

    new Tri(x, y, rotate);

    x = x + 42;

    if( x > (winWidth + 42) ) {
        x = 0   ;
        y = y + 24;
    }
}

```

There seems to be a brief 1-2 second pause/freeze though while the shapes are being drawn. Is there a more efficient way to draw all the shapes first (or push to an array) then add *that* to the canvas all at once?

I based my code off of the example here: <http://paperjs.org/examples/candy-crash/> (click "source" in the upper right corner).

Any help is much appreciated.

Thanks!