HTML5 < canvas>

The < canvas> element, which came to us in HTML5 was the first step towards HTML5 games becoming big.
The canvas allows so many things that you wouldn't have been able to do otherwise, and does it rather efficiently.

Canvas renders 2D graphics onto a given area in the browser window. It does so dynamically via scripting (i.e. javascript). The shapes and images which are rendered on the canvas can be manipulated in several ways. The most obvious and useful ways is rotating the image; which you would not have been able to do without the canvas, unless you did some rather inefficient and complicated php scripting to alter an image at the pixel-level to make it do a similar thing.


Javascript has a 2D graphics API which accesses the canvas drawing area, which is how games can be written. But just because it only has a 2D API, don't let that make you think 3D isn't possible.
For a start, you could simply write your own 3D engine, which uses normal 2D functions to generate a 3D object and render the 2D projection on the canvas. Doing so just requires a bit of mathematics. But making it a huge and playable game is where it gets difficult.

You could create a whole 3D engine if you wanted, but there are people working on a standard for 3D. It's called WebGL, and it does what I just described, but it simplifies it by allowing you to just call the functions, rather than having to think up all that complicated stuff yourself.


To get started with using the HTML5 Canvas, try this introduction to using the HTML5 Canvas.
And to learn all the basics of making HTML5 games, check out the HTML5 Game Development Guide