Paper.js/Canvas performance and simple Raster animations

Question

I am trying to create a tiny Guitar Hero game using Paper.js as an experiment.

Here is a live and testable version of my code (wait for 1 second) -

http://codepen.io/anon/pen/GgggwK

• I have an array with delays, e.g intervalArray =[200,300,500,100,200], and I use that array to fire up a function that pushes a Raster Image into a group.

• There are a total of 5 Groups(for 5 guitar chords) which are animated with view.onFrame so their position.y changes at a specified dropSpeed.

• Hence whatever I push into those Groups is animated(flowing) down the canvas.

• There are also 5 Circles and the images/notes that are flowing down overlap the circles at some point.

• If the user clicks that circle at the right time(when note overlaps), he gets some points.

I am recycling the images when they reach the end of the canvas, so I will not have too many objects to eat up memory.

The thing is, I was expecting to see a very, very fast performance with this.

I am using Raster Images which are supposed to be very fast to render in comparison to vectors, I am recycling the images and using few extra items on the Canvas but still on mobile browsers I am having some serious performance issues.

Even on my iMac I was expecting to see this run at the full frame rate - 60fps that requestAnimationFrame(this is what view.onFrame uses internally) allows, but sometimes the frame rate variates there as well.

---

I have tested this on:

Galaxy S3, Stock and Chrome browsers (laggy at some points when animating, the framerate freezes for 5,6 frames every 35 frames).

Google Nexus 5, Stock and Chrome browsers (works somehow better, freezes for 5,7 frames and continues)

iPhone 4 Safari browser (very sluggish)

iMac 2011, 8GB ram, Core2 Duo processor (fairly good framerate, sometimes variates)