1. Technology

Is there a 3d Canvas Context?


A simple 3d shape using wireframes

A simple 3d shape using wireframes

image courtesy J Kyrnin
Question: Is there a 3d Canvas Context?

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!

There are a lot of pseudo-3D demonstrations out there including a fountain of particles, peppers with wireframe boxes rotating above them, a google images gift box, and many others.

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.

©2014 About.com. All rights reserved.