Convert window coords to Canvas coords

Hello for everyone.

My game has root Canvas object that has referenced size 1280x720. It automatically scales to browser window, so it's real size is about 1360x700 (I use
ut.UILayout.UILayoutService.getRectTransformSizeOfEntity to determine that).

I'm trying to convert touch window coords to coords of the Canvas.

I use the following code to achieve that:

Code (JavaScript):

1.  
2. let displayInfo = world.getConfigData(ut.Core2D.DisplayInfo);
3. let windowSize: Vector2 = new Vector2(displayInfo.width, displayInfo.height);
4.  
5. let touch: ut.Core2D.Touch = ut.Core2D.Input.getTouch(0);
6. let touchPos: Vector2 = new Vector2(touch.x, touch.y);
7.  
8. let worldTouchPos: Vector3 = ut.Core2D.TransformService.windowToWorld(world, world.getEntityByName("Camera"), touchPos, windowSize);
9.  

Unfortunately, such code do not returns the expected result for me. It returns the position between the point [-400; -200] and the point [400; 200].

How to convert window position to position of the Canvas?

 

Maybe try experimenting with window.innerWidth (current actual size of the browser window), your camera/canvas size(whatever resolution you chose) and the actual window size (the size of your own screen). I don't know the exact formula, but those are the three you should need

 

Okay, guys, it's my experimental way to achieve this.

I'm not sure it's a good code, i'm not sure it will be work in all cases, but currently it works good for me:

Code (JavaScript):

1. export function screenToCanvasCoords(world: ut.World, screenPos: Vector2): Vector2 {
2.     // get actual screen size
3.     let displayInfo: ut.Core2D.DisplayInfo = world.getConfigData(ut.Core2D.DisplayInfo);
4.     let screenSize: Vector2 = new Vector2(displayInfo.width, displayInfo.height);
5.  
6.     // move origin point from the left bottom point of screen to the center of screen
7.     let screenCorrectToCenterPos: Vector2 = new Vector2(
8.         screenPos.x - 0.5 * screenSize.x,
9.         screenPos.y - 0.5 * screenSize.y);
10.  
11.     // get actual canvas size
12.     let canvas: ut.Entity = world.getEntityByName("Canvas");
13.     let canvasRealSize: Vector2 = ut.UILayout.UILayoutService.getRectTransformSizeOfEntity(world, canvas);
14.  
15.     // convert screen coords system to canvas coords system
16.     let xRatio =  Math.abs(canvasRealSize.x) / Math.abs(screenSize.x);
17.     let yRatio = Math.abs(canvasRealSize.y) / Math.abs(screenSize.y);
18.     let canvasPosX = screenCorrectToCenterPos.x * xRatio;
19.     let canvasPosY = screenCorrectToCenterPos.y * yRatio;
20.  
21.     return new Vector2(canvasPosX, canvasPosY);
22. }

Pakor, thank you again for the tip.

I hope such code will be useful for someone.
If you find the better way to achive the same result - please let me know.