It looks as though you're trying to draw an image (an arrow) at a given rotation. Well, if we assume a modern browser (not a bad assumption for phones these days), that's quite easy. Just have an img
on your page and apply a CSS transform on it.
See this site for more info on rotations in CSS: http://www.cssrotate.com/ (wow, somebody made an entire site for that…)
Now you also want to apply the rotation via JavaScript, so you'll need to change the CSS attribute dynamically. Since it's still quite new and has vendor prefixes, that's a little tricky, but not too hard. This site has a nice way to cope with it: http://www.javascriptkit.com/javatutors/setcss3properties.shtml
Putting it together, you could have this:
<img id="myarrow" src="myarrow.png" />
(blah)
<script>
// from http://www.javascriptkit.com/javatutors/setcss3properties.shtml
function getsupportedprop(proparray){
var root=document.documentElement;
for (var i=0; i<proparray.length; i++){
if (proparray[i] in root.style){
return proparray[i];
}
}
return false;
}
var cssTransform;
function setArrowRotation(x){
if(cssTransform===undefined){
cssTransform=getsupportedprop(['transform','webkitTransform','MozTransform','OTransform','msTransform']);
}
if(cssTransform){
document.getElementById('myarrow').style[cssTransform]='rotate('+x+'deg)';
}
}
</script>
Now just call setArrowRotation
whenever you need to redirect the arrow.
Here's a fiddle which continuously rotates the arrow: http://jsfiddle.net/y2sxE/