FIX: localtoGlobal missing in HTML5

To get a local position in a div is not directly possible.
Usually this is easy, just get the position of the parent and subtract.

But when the parent has been transformed (rotated or translated) it can be a REAL problem.
If you do not want to use matrix, because you are animating your divs with rotate and left and top, there is a solution that works cross-browser.

It's just not very simple.

Here is the JSfiddle: http://jsfiddle.net/Cr5wF/6/


Div (id:rot) is moved and rotated. The yellow dot is inside the grey area. On mouse move over the grey area the yellow dot is repositioned to fall exactly over the mouse.
NOTE: We cannot use transform-origin, because it is not supported by IE.

This is not a practical library, but more a proof of concept.
Note: just checked on my iPad and something is wrong... The grey object isn't moving.. No idea why yet..

Debugging html5 games

Debugging games can be VERY annoying.
Especially if you have to debug android 2.2 for instance.
You are on a mobile device, without debug messages.
Android provides remote debugging, but not for really old browsers or all phones.

What to do?

Well the easiest way I could come up with was create my own debug-console in javascript.

Here is a jsFiddle:
http://jsfiddle.net/GfmxT/3/

In Chrome it works fine, but I checked on Android this morning and found there was no scrolling (even though scroll is on auto), and on IE and firefox it doesn't scroll down automatically! But you can use the scrollbars. I've been fiddling on the iPad and saw I needed a function to stop the autoscroll so you can swipe-scroll through the debug statements.

So there IS more than meets the eye to this simple concept.
I allready had some great experiences with clients testing and copying information from the debug console to communicate an error. That's a lot better than a bug report saying: "It doesn't work on...".
Now I often don't even have to reproduce the error to be able to fix it.

It's only too bad that the real error messages don't come through like they do on the desktop console. But I think there is a jQuery function to do (part) of that as well. So I'll be updating this soon.