When you use the HTML 5 <canvas> tag one of the first things you do is set the rendering context to
2d or two dimensional. But what if you want to draw 3-dimensional images?
The short answer is that there is only one context — 2d. According to the W3C:
“A future version of this specification will probably define a 3d context (probably based on the OpenGL ES API).”
In other words, the canvas tag will eventually support other contexts beyond 2d, but at present there is only the 2d context.
But I’ve Seen 3D Canvas Demonstrations!
What all of these things have in common is that they are using standard 2D drawing techniques to model 3d. A common way to model 3d in a 2d context is through ray casting. The other way that many canvas sites model 3d is with wire-frames.
If you want to get true 3d, you need to find a 3d context and a browser or browser plugin that supports it. Of course, anyone not using that browser or plugin won’t be able to view your 3d masterpiece. Some options include:
There Will be a 3d Context Eventually
Once a standard has been agreed upon, a 3d rendering context will become available for the canvas tag. Until then, you’ll need to continue faking it in two dimensions.