Aspect Ratio canvas dimensions with ECMAScript

[etisdew]

Finally got my current canvas running from a flex box with relatively sized parents.

          var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0),
                w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
		window.addEventListener("load",function(){
			//............................................				
			//Get our extended GL Context Object
			
			gl = GLInstance("gl_context_canvas")
                        // The way to get 16:9 aspect can be achieved by multiplying the height by 1.777..
                        // and I account for the odds that its 'profile', gotta fit my sidenav.
				.fSetSize(h < w ? h * 1.777 -32 : w - 232, h - 32)
				.fClear();

Have you found any other methods of accessing and setting the height from a relative value? All other routes I took return null. Chrome 60 scared to try moz, reminds me to add the -prefix-'s, canvas is a flex box child aswell. lol Expected so many more problems than this so far. If its just returning an unexpected type I'd be happy to break it down... luckily docs start making sense and magicly ending up on the right page once I mention trouble finding things.

[etisdew]

I tinkered with this until 5am before I remembered fSetSize was self defined and I could communicate deeper in the implementation but I already have a few things to keep track of as non-canonical to the lesson so far. Man I gotta just move forward with the lessons. lol This is really teaching me more about myself as a programmer than anything else I've done.
It does seem it is possible even in Chrome to snag a value that was defined as CSS width: calc(100vh - --padding). I don't use css variables but subtract the amount of window scale/padding/margin.

I believe what i need to do is store the current aspect ratio if 16:9 isn't gunna happen naively and use that to compensate for deformation and view width. Where do we handle smooshing inside the canvas? Attaching the difference in lesson 03, gl, and the html

gl.txt

viewer.txt

The desired outcome is re scaling of the working area to the non-optimal outer dimensions. But I'm not entirely sure where its deforming.

[etisdew]

For what its worth they are square, and that is what matters. I managed to get drag drop images to the DOM and looking specifically at object manipulation within the webGL2 context. I am not precisely sure how to create a texture from them yet. The hunt continues. Is the process the same for each of the image formats with a built in?

[sketchpunk]

Sorry, been busy. So let me understand whats going on. You put your webgl canvas in a flexbox? That itself is an issue. You can do that, but you need to do extra things to handle it properly.

https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
Every html object has the method, getBoundingClientRect. This gives you the width, height, x,y, etc information you'll need. Ideally you'd want to make lets say a div layer be your container for the canvas and have the css set for overflow to be hidden or something so the div layer can flex without the canvas holding its shape. You might need to apply other things to the div, like position:relative and also setting the child node (like the canvas) to position:absolute.

Now the next deal is you need to hook into window on resize even. So when the page resizes, you can get the div container's size data THEN you can set the canvas to that size to match. BUUUUT, when your allowing things to resize and have a projection matrix setup, you need to reset it based on the new size of the canvas for things to render correctly without being smooched.

About textures, I have a video on how to do it. Its fairly easy once you see the code. The concept is you just load an image in an image element, then you just use a GL command to push it to the gpu. Then you just need to setup a shader uniform to set the texture. Also, if your dealing with textures you need to setup uv/texcoord values for reach vertice in your mesh data, without it you'll have a hard time dealing with textures.

[etisdew]

I don't know that I saw this! Basicly what I bashed my head to get to. lol Thank you for the tip on boundingClient however I don't know how that escaped my search, hope you're well. If you're interested in putting your name on something and helping me get a team on track. I bow to your expertise on the topic as the only person tasked and willing to handle the GL requirements.