Load image, scale, then overlap - Badge an image

All my current code is in a worker. I now have the need for a simple graphics issue. I have two square images with known width/height. I need to take the first and draw it at 64x64, then take the second and draw it at 16x16 and position at the bottom right corner. The final image is 64x64. I am basically trying to make the 2nd image a badge on the first image.

So now this is piece of cake in 2d canvas, however I cannot (for some reasons) do communication with the doc, I have to do this all in canvas, in Firefox we have support since Firefox 44 (last year) for webgl canvas. So I am trying to get this done in that.

Here is what I put together from around the web, can you please help me complete it. My drawImage method is what needs to work properly I set it up to take arguments but I remove all my code that was respecting it, because it was really breaking things. I have to edit the

vec4

second arg for scaling (for instance

1.5

will make it scale to half the size), but i am not able to figure out how to position.

There's a million answers to this question because WebGL is a rasterization library

So for example

You could adjust the viewport

You could add a uniform vec2 scale on top of your pos since without a scale you can't make the quad smaller/larger

You could update the vertices before drawing.

You could multiply aVertex by a uniform mat3 matrix which would let you arbitrarily position, scale, and rotate

You could multiply aVertex by a uniform mat4 matrix which would let you arbitrarily position, scale, rotate, and project into 3d

5 is this the standard solution because it's the most flexible. This article goes over using a mat3 and shows your method before it and why using a matrix is a far better choice, it then expands on that to a mat4 for doing full 3d.

So it's not clear what you want. Do you want to learn the "good way (#5) or do you just want your code to work with as few changes as possible.

Note that WebGL, by default, clears the canvas the next time you render so the fact that you're rendering twice, once after each image loads, means you're only going to end up with the 2nd result. To prevent that you need to pass { preserveDrawingBuffer: true, } as the second parameter to getContext.

I gotta be honest, this feels like a "do my homework for me question". Like did you even look up a single article on WebGL? I suppose I should give you the benefit of the doubt but there's so much here.