RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


A 3D Exploration of the HTML Canvas Element : Page 3

The HTML Canvas, an element of the upcoming HTML 5 specification, allows you to efficiently draw arbitrary graphics at the primitive or individual pixel level. Find out how to implement a 3D rendering using the HTML Canvas.

The Two Ways of Creating an HC
Like with most HTML elements, you can create an HC in two ways. The first way is to declare it using markup:

  <canvas id="canvas" style="border: solid 1px" width="400" height="400">

If you use this approach, your code will need to call getElementById() to get the canvas object:

  var canvas = document.getElementById( "canvas" );

The other way is to create it programmatically using JavaScript:

  var canvas = document.createElement( "canvas" );
  canvas.style.border = "1px solid";
  canvas.width = 400;
  canvas.height = 400;
  canvas.style.width = 400;
  canvas.style.height = 400;
  document.documentElement.appendChild( canvas );

These two methods produce the same result, so use whichever one is more convenient. The 3D game in this article utilizes the second method.

3D Rendering
Now that you know the basics of drawing with the HTML Canvas, take the 3D rendering game included in the source code download. This article covers only the highlights, because the details are beyond its scope.

The 3D world is composed of a grid. Each element of the grid can be either filled or empty. Rendering this grid means turning walls into 3D polygons, projecting those 3D polygons into 2D, and drawing the 2D polygons to the HC.

To support this, the 3D game in the downloadable source code has classes representing 2D and 3D points called P2 and P3, as well as polygon classes named Polygon2 and Polygon3. The Polygon3.project() method projects the polygon onto the 2D surface, producing a Polygon2. The Polygon2, in turn, can draw itself to the HC using moveTo and lineTo methods.

Since the HC takes care of the heavy lifting—filling polygons—the 3D code is pretty fast, even though it's in JavaScript and not a more traditional graphics language like C.

Two-dimensional spatial transformations are crucial to graphics programming. They let you scale, rotate, and translate any drawing by any measure. This works especially well with vector graphics because the transformations don't reduce rendering quality.

Transformations also follow the state machine model, so you should use them with save() and restore(). Here's the code that renders the point-of-view arrow in the map window of the 3D system:

  function render_arrow( ctx, x, y, scale, rot ) {
    // Save the current graphics state, including transformation state.

    // Move the arrow into place.
    ctx.translate( x, y );
    ctx.scale( scale, scale );
    ctx.rotate( rot );

    // Draw the arrow.
    ctx.strokeStyle = "#aaa";
    arrow.fill( ctx );

    // Restore the original graphics state

Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date