Graphics

The topics in this section describe how to create compelling experiences using Scalable Vector Graphics (SVG), the canvas element, and other graphical content.

HTML5 provides three core technologies for implementing graphics - scalable vector graphics (SVG), canvas, and CSS. This section describes these technologies in the context of graphics in general and game development.

Introduction

In additional to support for traditional image formats (GIF, 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 for rendering 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 will show you just what is possible with SVG, canvas, and CSS3.

LinkDescription
Particle AccelerationIn 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 PacmanA massive and sprawling universe of interlocking PAC-MAN® mazes built on HTML5 Canvas.
Disney Tron: LegacyA digital comic book comes to life with SVG; and shines with IE’s hardware acceleration.
Flickr PostcardsShows off 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.

LinkDescription
CSS3 transitions and animationsCSS 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 an HTML5-compatible browser, such as Internet Explorer 10 or later.
CSS3 2D and 3D transformsThese hands on demos show you how CSS3 transformations work. This sample requires an HTML5-compatible browser, such as Internet Explorer 10 or later.
CSS3 gradientsJust 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 DemoThis sample will require an HTML5-compatible browser, such as Windows Internet Explorer 9 or later.
Mr. Potato Gun Canvas DemoThis sample will require an HTML5-compatible browser, such as Internet Explorer 9 or later.
Canvas Pad: Learn and Play with HTML5 Canvas! Update the code and press the 'Ctrl+Enter' key to update the Canvas in real-time. This sample will require an HTML5-compatible browser, such as Internet Explorer 9 or later.
Canvas Zoom sample powered by Seadragon Ajax This sample will require an HTML5-compatible browser, such as Internet Explorer 9 or later.
CSS Gradient Background MakerThis sample will require an HTML5-compatible browser, such as Internet Explorer 10 or later.
SVG–oids Canvas SampleThis re-creation of a classic 1979 arcade game shows what can be done with a little bit of SVG, JavaScript, and programming skill. This sample will require an HTML5-compatible browser, such as Internet Explorer 9 or later.

 

Digging in deeper

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

LinkDescription
Adding Personality with CSS3 Transitions and AnimationsThis IEBlog post, including Rich Bradshaw's excellent article Using CSS3 Transitions, Transforms and Animation, provides in-depth information about these new CSS features.
The Developers Guide to CanvasThe HTML5 Canvas API deconstructed into simple step-by-step development.
Behind the Scenes of Disney TRON: How to Build a Digital Book Site with HTML5Giorgio 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 CanvasThis tutorial builds an app that uses canvas, SVG, and JS frameworks to visualize images and large data sets.
How to Choose Between Canvas and SVG for your SiteWith a lot of excitement around Canvas, there has been a tendency to ignore SVG, which, in many cases, is the better choice. Learn when to choose Canvas, SVG, or a combination of the two.
HTML5 Canvas and the Canvas Shadow DOM The canvas shadow Document Object Model (DOM) enables you to provide code behind a canvas element for better user interaction and accessibility.

 

Gaming

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

LinkDescription
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 EaselJSWhen 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 CanvasDavid 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 EngineLearn how to build a simple space-based asteroids game using the Impact game engine, one of the more robust engines out at the moment.

 

 

 

Show: