• Hello [name]! Thanks for joining the GMC. Before making any posts in the Tech Support forum, can we suggest you read the forum rules? These are simple guidelines that we ask you to follow so that you can get the best help possible for your issue.

HTML5 How to scale canvas preserving the clickable area

T Spoon

Member
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?
 
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

Member
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.
 
Top