How to keep texture aspect ratio in WebGL?

Question

JavaScript

Hello, I have a little misunderstanding of working with webgl. I'm trying to load an image as a texture into a canvas. But it does not maintain proportions and has some disproportionate dimensions. Attempts to change various parameters did not lead to anything sensible. And how did I understand that the textures should be square, but what if not? How do I fit a texture into a canvas while maintaining aspect ratio?
Example
https://codepen.io/anon/pen/QZYboL

Answer 1

Judging by this example, the texture must have dimensions of a power of two (2, 4, 8, 16, 32, 64, etc.). If it does not match these dimensions, then the parameter is used CLAMP_TO_EDGE, which stretches/crops the image to the nearest suitable size.
Again, they write on StackOverflow that if the browser supports WebGL 2.0, then there is a so-called. NPOT textures should be supported without issue - proof .

Answer 2

Once a texture is loaded, its blending is controlled by the shader, not by the original dimensions and proportions. The shader has so-called UV coordinates, they must be the same in width and height in order for the picture to be square.