HTML5 How to scale canvas preserving the clickable area

[T Spoon]

On our website, we upload games made by our students. Because scaling up usually looks better we have a view port of 640x480 for all the student games and scale the canvas up to fit its container, so that the game looks good on most desktop environments.

However, since we started implementing 640x480 view ports, the area where a mouse press is registered remains in the 640x480 box, so if the canvas is scaled up, the "clickable area" is only party of the actual view port.

This breaks the controls of many games relying on mouse clicks. Is there any way to automatically scale up the "clickable area" with the canvas?

 

[Michael Bateman]

As far as I'm aware, GM won't do this automatically for you, but you can achieve it with a script. You need to scale the mouse x/y coordinates by the same amount as you're scaling your canvas. I have an old test project that I think shows your issue, which I still have uploaded to my website here. View in a browser and pull the window around to resize it and see how the mouse x/y positions change, or on different phones with different resolutions. Basically, I update the mouse x/y as scaled at beginning of each step in my scaling engine and save them to global variables. Then use those global vars as the actual mouse x/y coordinates.

 

[T Spoon]

Thanks for your reply. While your fix seems to be the solid one, I applied a dirty fix by specifying the dimensions in the canvas tag of the game's html document to width=1024 and height=768, as these are the maximum dimensions. For the games the students programmed so far, this suffices. However, I'll look into easily integrate your fix in the future.