Your fps problem is probably because of overdraw. You have a ton of it going on in the test. Overdraw is when a pixel is drawn more than once - for example how the black squares are on top of the background. Due to how graphics cards work, first it draws the background, then it draws the black square on top of it, therefore drawing those pixels twice - and in your tests, then the one on top of that, and the one on top of that, which results in most of the screen being redrawn quite a few times.
Mobile hardware is far weaker than desktop, especially when it comes to pixel fill rates (the number of pixels a graphics card can draw in a 60th of a second). I read somewhere that on average devices can currently only draw 3x the number of pixels on the screen in that amount of time. If you take that into consideration, I'm quite confident you can increase the framerate dramatically - it did wonders for the game I'm working on.
For reference, I get 23 fps on an ipad 3 in landscape mode, and it goes up to 33 in portrait - because it's drawing less pixels. An iPhone 4S goes from 41 to 60.
Also, what device and os version are you using? iOS 4 had utterly terrible HTML 5 performance. iOS 5 increased HTML 5 performance by something like 2000% and then ios6 improved it about another third.