Next page | Contents page |


It is only fairly recently, with HTML5, that JavaScript has become able to manipulate pixels, through the graphics context associated with the MHTML <canvas> element. But from its earliest days it has been able to load and display images and animate them in a simple way.

HTML has an element for displaying images and here is an example, with its result.

  <img src="im/swan.jpg" width="300" height="450">

The value of the src attribute is the path to the file, in this case in a subdirectory called im (for images). The width and height values are in pixels but we just give the numerical value. Width and height are optional attributes but if you don't tell the browser how much space to allow it can end up shuffling the page around; also these should specify the actual size of the image in the file to avoid wasting resources on scaling to fit (wasting download time too if the image is really bigger than stated).

So far we have used no JavaScript but what that can do is to change the image to provide some animation. Move your mouse around and see what happens to the next image.


Next page | Contents page |