Correction of input position after scaling of WebGL canvas in css

Questions & Answers
1

I already saw this issue described on this forum, but unfortunately did not find an answer yet (especially here question from @Charles-Van-Norman)

The final rendering of my WebGL canvas in windowed mode is quite blurry and the final graphics quality of the build is really poor.
One of the option would be to rescale canvas width and height and force the zoom at a value smaller than 1.
For instance with an initial canvas width of 1000px, we would do in the css something like:

#canvas{zoom: 0.5;width: 2000px;}

It enhanced perfectly the graphics BUT the input location of mouse events are offset by the zoom value.

Is there any way to scale the canvas in the browser while correcting the mouse inputs in the correct position for the game?

Thanks a lot for your help

3

Help please, I have the same problem, now in 2020.

2

Hello,

I have the same problem than you. I tried to understand why the mouse inputs were wrong.
Unity seems to send the rights values for mouse positions but wrong for width and height because of zoom value.
I read a bit the build js file. I found fillMouseEventData method and I replaced

e.screenX   by   e.screenX * 2.0
e.screenY   by   e.screenY * 2.0

and

e.clientX - rect.left   by   (e.clientX - rect.left) * 2.0
e.clientY - rect.top   by   (e.clientY - rect.top) * 2.0

The value depends on your zoom (1 / 0.5)
I think the devicePixelRatio can be added in the calculations.

As the zoom property is not supported on firefox, I used -moz-transform.
The problem is:

  • for chrome, it seems the canvas be rendered first then be scaled by zoom value
  • for firefox, it seems the canvas be scaled by transform value then be renderer. To fix it, I had to double width and height values than normally.

Tell me if it works for you.