Think of graphics in a new way

  • Article

HTML5 provides three core technologies for implementing graphics - Scalable Vector Graphics (SVG), the canvas element, and Cascading Style Sheets (CSS). This section describes these technologies in the context of graphics in general and as graphics relate to game development.

In this section

Topic Description

Choose between SVG and Canvas

Starting at a high level, this topic provides a comparison of SVG and HTML Canvas 2D Context, then proceeds to discuss a number of comparative code examples, such as ray tracing and green screening.

SVG coordinate transformations

This topic covers SVG coordinate transformations that are associated with the getScreenCTM() method.

Basic SVG animation

This topic covers basic SVG animation and is a prerequisite for Intermediate SVG Animation. Basic knowledge of HTML and JavaScript is assumed. To fully understand the material presented in this topic, plan to spend about one hour of study.

Intermediate SVG animation

This topic introduces intermediate level SVG animation techniques and starts where the Basic SVG Animation topic left off. To fully understand the concepts presented in this topic, plan to spend about 1 hour of study.

Advanced SVG animation

This topic looks at more advanced concepts of creating SVG animation for your website. Before you work through this tutorial, be comfortable with Basic SVG Animation, Intermediate SVG Animation, and have a solid understanding of HTML and JavaScript.

Create 3D graphics using canvas

This topic covers a technique for manipulating a 3-dimensional object using the HTML5canvas element.

 

Introduction

In additional to support for traditional image formats (Graphics Interchange Format (GIF), Portable Network Graphics (PNG), JPG, and so on), modern browsers enable both static and dynamic graphics primarily through the following three core technologies:

  • SVG provides a powerful markup language for vector-based (as opposed to bitmap-based) graphics, filters, and animation. For an excellent overview, see Scalable Vector Graphics (SVG) and SVG.
  • The canvas element provides scripts with a resolution-dependent bitmap canvas, which can be used to render graphs, game graphics, or other visual images on the fly. For a great overview, see HTML5 canvas Element.
  • The latest iteration of CSS provides a number of graphics oriented enhancements including gradients, two- and three-dimensional transformations, animations and transitions. For an excellent overview, see Cascading Style Sheets, Level 3 (CSS3) and CSS.

Be inspired

The following examples show you just what is possible with SVG, canvas, and CSS3.

Link Description
Particle Acceleration In addition to traditional two-dimensional objects, canvas can be used to animate three-dimensional objects, as shown in this performant example. Now that you know what is possible, see 3D Canvas to learn how.
World’s Biggest Pacman A massive and sprawling universe of interlocking PAC-MAN® mazes built on HTML5 Canvas.
Disney Tron: Legacy A digital comic book comes to life with SVG and shines with IE’s hardware acceleration.
Flickr Postcards Showcases some of what can be done using features from the CSS3 2D Transforms module together with Flickr.

 

Demos

Like a little more inspiration? Then try the following samples.

Link Description
CSS3 transitions and animations CSS transitions allow you to smoothly animate from an original state to a new state over time. CSS animations provide additional control through the use of a timing function and keyframes. This sample requires Internet Explorer 10 or later. It may also work with other modern browsers compatible with HTML5.
CSS3 2D and 3D transforms These hands-on demos show you how CSS3 transformations work. This sample requires Internet Explorer 10 or later. It may also work with other modern browsers compatible with HTML5.
CSS3 gradients Just what is a gradient? In this case, a picture is worth a thousand words, and this hands-on demo does just that.
IE Beatz Canvas Demo This sample requires Windows Internet Explorer 9 or later. It may also work with other modern browsers compatible with HTML5.
Mr. Potato Gun Canvas Demo This sample requires Internet Explorer 9 or later. It may also work with other modern browsers compatible with HTML5.
Canvas Pad: Learn and Play with HTML5 Canvas! Update the code and press Ctrl+Enter key to update the Canvas in real-time. This sample requires Internet Explorer 9 or later. It may also work with other modern browsers compatible with HTML5.
Canvas Zoom sample powered by Seadragon Ajax This sample requires Internet Explorer 9 or later. It may also work with other modern browsers compatible with HTML5.
CSS Gradient Background Maker This sample requires Internet Explorer 10 or later. It may also work with other modern browsers compatible with HTML5.
SVG–oids Canvas Sample This recreation of a classic 1979 arcade game shows what can be done with a little bit of SVG, JavaScript, and programming skill. This sample requires Internet Explorer 9 or later. It may also work with other modern browsers compatible with HTML5.

 

Digging in deeper

Ready to learn more? Then check out the following links to help get you started.

Link Description
Adding Personality with CSS3 Transitions and Animations This IEBlog post provides in-depth information about these new CSS features.
CSS3 3D Transforms CSS3 Transforms take on a whole new dimension with 3D Transforms. This IEBlog post explains the basics.
The Developers Guide to Canvas The HTML5 Canvas API deconstructed into simple step-by-step development.
Behind the Scenes of Disney TRON: How to Build a Digital Book Site with HTML5 Giorgio Sardo takes you from design to deploy and how to choose the right web standards for your site.
How to Create a Visual Library of Images in HTML5 Canvas This tutorial builds an app that uses canvas, SVG, and JavaScript frameworks to visualize images and large data sets.
How to Choose Between Canvas and SVG for your Site Learn when to choose Canvas, SVG, or a combination of the two.

 

Gaming

Interested in game development? Then check out the following resources.

Link Description
Top 5 Best Practices for Building HTML5 Games, In Action! Learn about HTML5 game development frameworks and how to make the most of the browser platform.
How to Animate Sprites in Canvas with EaselJS When you write casual games using the HTML5 Canvas element, you need a way to handle your sprites. Learn how to animate them with the EaselJS gaming plug-in.
How to Write a BrikBloc Game with HTML5 SVG and Canvas David Cathue, HTML5 gaming expert shows you how to use canvas, SVG, and JS frameworks to make a gaming code easy.
How to Build Asteroids with the Impact HTML5 Game Engine Learn how to build a simple space-based asteroids game using the Impact game engine, one of the more robust engines out at the moment.