I am trying to develop an app that is supported at least on an iTouch Version 4.3.4 (8K2) which is comprised almost entirely of a Canvas element upon which objects are drawn. The graphics display flawlessly when I do it on my normal browsers and even when I use the iTouch's Safari, but as soon as I try to clip it to the desktop (because it is designed perfectly to be run fullscreen) it causes errors due to image rotation. When rotation is removed from the process of drawing it again works fine.
Code:
//Canvas size 320x480
var x, y // Some variables on the scale of 0 to 100
var alpha //Some angle, in radians
ctx.save();
//Bring to 0,0 and rotate
ctx.translate(x,y);
ctx.rotate(alpha);
ctx.translate(-x,-y);
ctx.drawImage(car, ...); // You get the point
//Restore Canvas Context for next draw
ctx.translate(x,y);
ctx.rotate(-alpha);
ctx.translate(-x,-y);
ctx.restore();
The variables above are defined elsewhere, and I left out some details I figured would be useless.
The issue is that the canvas will remain rotated when run from the iTouch's home page, usually after drawing itself three times in the background (I can tell by the fact I can see 3 canvas in the background of different orientations).
I thought it might be due to a large amount of processing for the iTouch to do so I set the frame rate to 5 seconds and although it shows less of a rotation effect it still does.
Any hints of what I could try to fix this? It looks pretty dull when all cars are pointing forward no matter what direction they drive..