Fixed canvas resolution stretching with bigger screens

I Could stretch the canvas, with css, and make a fixed resolution, scaled with the screen. But Happens that button`s boxes are away from the box.
But happens that event of the buttons doesn’t match the position of the buttons anymore. Is there a way to solve this?
Thats my canvas:

    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

thats my code:

I won’t be helpful on this one. Pinging @sebavan and @RaananW


Would you be able to reproduce this somewhere online? The playground will be wonderful, but I understand you are manipulating the canvas so if it is not possible, a deployed sample somewhere will do

Of Course my friends…

Here is a sample:

I put an textblock when u hover the button… if u open in a new window, and pass the mouse where it was 50 top and 50 left of a 400x300 screen… it will give the alert.

Yeah, I get that now.

You are creating a rather unusual scene here - you are rezising the engine, but not resizing the canvas. Our entire picking implementation is based on the engine’s size (and not the canvas size), which we always expect to be the same size as its rendering canvas. So the correlation between browser (canvas) and babylon (engine) is incorrect.

Is there a reason why you don’t resize the canvas as well?

I want to stretch the canvas so i`ll have the same FOV for different window resolution. And almost the same view.

I would recommend doing something else. You can set the viewport differently, but keep the engine size the canvas size

How do i set the viewport to work similar in many screen sizes?