Rendering image using texSubImage2D in Haxe - webgl

Question

I am learning how to stamp an image onto my canvas using Haxe and I have read that texSubImage2D should be the function I need to do the job.
I have read some documentation found here and thought I could implement what I was after by completing the following params:
void gl.texSubImage2D(target, level, xoffset, yoffset, format, type, HTMLImageElement? pixels);
This is what I did:
gl.texSubImage2D (cast fluid.dyeRenderTarget.writeToTexture, 0, Math.round(mouse.x), Math.round(mouse.y), gl.RGB, gl.UNSIGNED_BYTE, document.querySelector('img[src="images/myImage.jpg"]'));
However, when I try to build the project, I am getting the following errors:
src/Main.hx:571: characters 135-191 : js.html.Element should be Int
src/Main.hx:571: characters 135-191 : For function argument 'format'
When I went back to the docs, the format I have passed gl.RGB is an accepted param, so I am not sure where I am going wrong.
Any guidance would be really appreciated.

Answer 1

I can't quite reproduce the error message you're getting, I think the errors might have improved a bit in more in recent Haxe versions. Anyway, there's a few issues here:
Firstly, by doing gl.RGB / gl.UNSIGNED_BYTE, you're trying to access static fields from an instance. I actually get a helpful error for this:
Cannot access static field RGB from a class instance
While other languages allow this, Haxe does not, you have to access them through the class name. To fix this, simply prefix js.html.webgl.RenderingContext.
Secondly, querySelector() returns a plain js.html.Element, which none of the overloads accepts. They all want something more specific: VideoElement, ImageElement or CanvasElement. So you'd have to cast it first:
var image:js.html.ImageElement = cast document.querySelector('img[src="images/myImage.jpg"]');
Finally, it seems a bit suspicious that you'd need to cast the first parameter. Even if it works, there might be a nicer way of doing that with the wrapper you're using.
So in summary, the following should compile:
gl.texSubImage2D(cast fluid.dyeRenderTarget.writeToTexture, 0,
Math.round(mouse.x), Math.round(mouse.y),
RenderingContext.RGB, RenderingContext.UNSIGNED_BYTE, image);