Just as welcome to the toolbox of the web game developer as the canvas element is the new audio element. The game, a small 3D maze game, generated black and white images at runtime and fed them continuously to the image src property, relying on the fact that img elements can also take a JavaScript expression in place of an actual URL.Ĭtx.arc(50, 50, 25, 0, Math.PI * 2, true) Ĭtx.arc(150, 50, 25, 0, Math.PI * 2, true) Wolf 5K, the winner of the 2002 contest The 5K, which challenged developers to create a web site in just 5 kilobytes, used a somewhat similar technique. One of the clever uses of this data: URI scheme has been to generate images on the fly and thus provide a dynamically animated image, which is not a great solution for anything but small and simple images. Uniform Resource Identifier (URI) schemes exist that let you assign source files to img elements, for example, using a base64-encoded data string, either directly in the HTML or by setting the src or href property with JavaScript. Entire drawing libraries rely on nothing more than coloured divelements - that may be clever, but it’s not very efficient for doing anything more than drawing a few simple shapes. Sure, people have created more or less ingenious (and/or crazy) solutions in lieu of better tools for creating dynamic graphics. The canvas element provides web game developers with the ability to create dynamic graphics, giving them a welcome alternative to static images and animated GIFs. Hobbyist game developers were also among the first to embrace HTML5, and for good reason. More advanced projects soon followed, giving the new standard a dose of good publicity and promising a future with a more dynamic and visually interesting web. The visual nature of this element without a doubt helped it spread quickly when the first interactive animations and graphics effects started appearing.

Many features from the HTML5 specification have applications in game development, but one of the first features to gain widespread popularity was the canvas element.

Wolf 3d html5