Image Node

An image node works much like a polygon node but it displays an image instead of a polygon. So you simply pass an image object to the constructor of the twodee.ImageNode class to create an image node:

var image = new Image();
image.src = "asteroid.png";
      
var imageNode = new twodee.ImageNode(image);
rootNode.appendChild(imageNode);

The output looks like this:

If you are just rendering a single frame instead of using a rendering loop then you might notice that the image is not rendered at all. This is because the browser might not have loaded the image yet. When using a rendering loop then this doesn't matter because the image is rendered as soon as it is loaded but when you just render a single frame manually then you must take care of pre-loading the image first.

<<< Previous: Polygon Node | Next: Transformations >>>