Allow for manual placement of the canvas element

[AlexanderSchuetz97]

Is your feature request related to a problem? Please describe.
For Wasm/Web, I want to integrate egui into an existing large single page web application written in javascript/typescript.
egui should only render stuff inside a canvas. Placement of that canvas is very cumbersome as
egui runs code in its update loop that just assumes that egui takes care of the entire screen.

Describe the solution you'd like
An option for me prevent egui from touching the css style of the canvas element at all.
Ideally egui should look at the canvas size in its draw routine in this mode and just "accept" that this is the size it has to use.

Describe alternatives you've considered
Wrap the canvas in a div, and overwrite the css style in the div. This is however very wonky as
if I do not set the size of the div to absolute pixel values for every execution of the update routine the canvas grows larger.
This prevents me from using %width or %height stuff in the div.

My current workaround is not pretty but works:

<div style="height: 500px; width: 500px; position: relative !important;">
    <canvas id="the_canvas_id"></canvas>
</div>

the "position: relative !important" has to be set to overwrite the "position: absolute" that egui sets on the canvas element.
and the sizes have to be set for the update loop to be able to detect. Again if I set the sizes to a percentage then
the canvas will just add 1 pixel each time the update loop is ran. (rounding issue?)

I would prefer to not have to do this at all and just set some flag in WebOptions that placement of the canvas
is "manual" and egui should not mess with the style tag of the canvas at all. Then I could just set all
the stuff on the canvas directly and not abuse a div for this. Plus hopefully the canvas size increase issue would go away
when using %height %width.

Setting the size in the WebOptions::max_size_points is not really helping either since the canvas may move/resize
depending on what the user does and there doesn't appear to be a way of changing these values again after starting
the WebRunner.

Additional context
I am not using trunk, as my goal is to integrate egui into an existing application. I am using wasm-pack. This should not
have any impact tho as the only thing thats different is that the entrypoint is not called main but some other function
that the javascript code calls with the canvas id.
The rest of the "app" code is for now identical to emilk/eframe_template.

[jprochazk]

There are two reasons why this is happening:

1. The resize_canvas_to_screen_size function, somewhat confusingly named, attempts to set the width and height CSS properties (not the DOM attributes!) of the canvas element to the size of its parent element rounded to the nearest integer value. This then overwrites any other CSS width/height that may have been applied by users' stylesheets. This is also likely what causes the infinite expansion of the canvas when the parent element has no max width/height.
2. A bug in the IME/mobile text input handling code. It attempts to shrink the canvas to accomodate the space required by a touchscreen keyboard... by updating the style of the canvas. While well intentioned, the handling of that is better left to the application. I believe it is a bug because the code should not even run at all on non-mobile platforms

First issue should be addressed by:

• Use ResizeObserver instead of resize event #4536

[AlexanderSchuetz97]

I dont think this will address my problem. Your still setting the canvas size in your code. (At least as far as I could tell from an inital glance) I asked for an option where the rust code does not touch the canvas dom element at all (other than drawing to it of course). Maybe I am misunderstanding your PR, in that case sorry.

[jprochazk]

It's setting the width and height DOM attributes, not the style properties. You control the size of the canvas on the page, eframe controls the size of the framebuffer. It has to do that, otherwise you get a stretched image.

Try clicking "play" on this MDN widget: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas#result - change the width on the <canvas> and press run. The green square's size doesn't change.

[AlexanderSchuetz97]

You are correct. I misread this part in the rust code.
I would appreciate your improvment getting merged by the maintainers.