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)?

  • 5
    \$\begingroup\$ These are three separate questions, and both are basic things you could easily Google for. The answer to your title question is yes, the answer to your second question is to just use standard WebGL texturing, and the answer to your third is to draw textured quads. That said, unless you are planning to require crazy shader effects, avoid WebGL, as it is still unsupported on many users' desktop browsers and almost all mobile browsers, while the 2D canvas is supported almost everywhere and is a better fit for your needs. \$\endgroup\$ Commented Sep 4, 2012 at 21:57
  • \$\begingroup\$ Obviously shinydemos.com/emberwind webgl.com/category/webgl-games \$\endgroup\$ Commented Sep 4, 2012 at 21:57
  • 1
    \$\begingroup\$ Hey Sean, I must respectfully disagree that 2D canvas is a better fit for my needs. The performance of the 2D canvas is rather abysmal compared to what WebGL can offer. WebGL is an emerging technology and seems to have been well adopted by most web browsers (although notably not IE as far as I am aware). \$\endgroup\$ Commented Sep 4, 2012 at 22:00
  • 1
    \$\begingroup\$ I'm not sure why this is being down voted so much. Because it's a simple question? Those are allowed. When people Google these questions, why not have them end up here? \$\endgroup\$
    – House
    Commented Sep 4, 2012 at 22:49
  • 1
    \$\begingroup\$ @NicholasHill: having actually released a commercial game using WebGL, all I can say is that I regret the decision. Only a small fraction of desktop PC users have acces to WebGL. Mobile users have zero access. Unless you don't plan to release for another 2 years, I'd avoid WebGL. Your sales will be abysmal simply because all the primary consumers of Web games will be unable to play your game. \$\endgroup\$ Commented Sep 6, 2012 at 3:53

4 Answers 4


I think you should use a graphical framework instead of plain WebGL, except if you really need a control on every part of your game engine.

For example, with Three.js your questions could be easily answered :

  • You load an image using Three.ImageUtils.loadTexture (asynchroneous)
  • You display it by creating a mesh based on a Three.PlaneGeometry and a Three.MeshBasicMaterial, passing your image as the map option.
  • You now have to set the myMesh.position variable to the proper coordinates, and you're done.

If you do this, don't forget to use a Three.OrthographicCamera (because you probably don't want any perspective effect).


I wrote a very simple framework for the last Ludum Dare competition: barebones.js

It can create a GL context and you can take apart how it draws the splash to draw any 2D tiles anywhere you want.

Oh, and it has a font drawer too. That's super-useful.

(There's also an animated mesh loader and various 3D camera utils in there too. I have a much extended version of it and would be happy to move new features back into barebones.js if there were actually interested users. Long live hobby coding!)


Check this:


Long story short (copy-pasted from link, commented by me :P):

var neheTexture;
function initTexture() {
    // "gl" refers to the result of canvas.getContext("experimental-webgl");
    neheTexture = gl.createTexture();

    // I believe this is a html5 img element :P
    neheTexture.image = new Image();

    // good practice to set load-callback *before* set image source
    neheTexture.image.onload = function() {

    // set src, this will load the image asynchronously
    neheTexture.image.src = "nehe.gif";

But I still agree with the previous answers, you should go for a framework ...


I think you should check this out:


It's a multiplatform framwork, that wraps all the GL stuff. Also includes classes for tiled maps and izometrics. If you just need to load images and draw them at coordinates, you should have it setup in less than 5 minutes.


You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .