I've found WebGL (based on OpenGL) to be a fiendish and unforgiving framework for those learning to write HTML5-based games. Despite the presence of many examples on how to get started, I'm really struggling to understand how I could simply load a bunch of images and render them to a canvas quickly using WebGL.
My specific scenario involves trying to render a map using a bespoke but simple multi-layered tile engine, where each value in a three dimensional array points to the image to use for that location in the rendered image. Think "Sonic the Hedgehog" via tilesets, tiles, maps, layers, sprites etc.
Can anyone enlighten me:
1) How can I load an image that I can use as a texture in WebGL?
2) How can I dynamically select an image at run time and draw it at any co-ordinate, that I also select at run time?
Edit: Thanks for the responses so far. I'd like to clarify that my original title may not have been the best.
So, rephrasing my original post, here's another stab at the question I really want to ask:
Using WebGL, What is the best way to dynamically load an image at run time and "blit" it to a specific area on a canvas (also at run time)?