At FOWA London 2009 Bruce Lawson gave an introduction to HTML 5 and how it might be used in the future.

The HTML 5 spec was originally called “Web Applications 1.0″. Most of the attention has been on the new markup elements, but in his talk he takes a further look at the applications side of the spec, covering:

1. Dynamic images and graphs with canvas
2. Eliminating much forms validation with webforms 2.0
3. Local storage automagically saving your data
4. Geolocation
5. Building toolbars and menus.

Editor’s Note: We’ll be covering “How HTML 5 is Going to Completely Change your Web App” at The Future of Web Apps in Miami.

You can jump straight to the video, view the slides, read the transcript (thanks @joeloverton for doing this!), or check out the resources he demos in the talk:

• Eye-candy canvas
• canvas first-person shooter
• canvas first-person gifter
• the excanvas library to port canvas to Internet Explorer
• Filament Group’s jQuerty plugin using canvas for graphing data tables
• Raphaël JavaScript Library to make SVG that also works in Internet Explorer
• SVG Web is a JavaScript library which provides SVG support on Internet Explorer (Alpha code: not ready for production)
• My HTML5 forms demo, including range, date, placeholder, regex validation (Try in Opera and Chrome)
• modernizr – A small HTML5 capability detection library
• HTML5demos.com – Remy Sharp’s demos of geolocation, offline storage and web database and many others
• Video demos

Other useful resources:

• SVG vs. Canvas on Trivial Drawing Application: a comparison of canvas and SVG
• HTML5 Authors spec
• A video of Dean Edwards demoing his unreleased JavaScript library that detects and plugs the holes in current browsers’ HTML5 support

There are some great beginner canvast tutorials on the Opera Developer:

1. HTML 5 canvas – the basics
2. Creating an HTML 5 canvas painting application
3. Creating pseudo 3D games with HTML 5 canvas and raycasting
4. Creating pseudo 3D games with HTML 5 canvas and raycasting: Part 2

The video

Full transcription available at joeloverton.com/html5. We’d like to say a HUGE thank you to @joeloverton for doing this transcription!

The slides

Among the set of goodies in the HTML 5 specification is Canvas which is a way to programmatically draw using JavaScript.

We’ll explore the ins and outs of Canvas in this article, demonstrating what is possible with examples and links.

[Notice: Bruce Lawson is covering HTML 5 at The Future of Web Apps on Oct 1-2.]

Why Do You Need Canvas?

Canvas can be used to represent something visually in your browser. For example:

• Simple diagrams
• Fancy user interfaces
• Animations
• Charts and graphs
• Embedded drawing applications
• Working around CSS limitations

In basic terms it’s a very simple pixel-based drawing API, but used in the right way it can be the building block for some clever stuff.

What Tools Are at Your disposal?

Drawing tools

• Rectangles
• Arcs
• Paths and line drawing
• Bezier and quadratic curves

Effects

• Fills and strokes
• Shadows
• Linear and radial gradients
• Alpha transparency
• Compositing

Transformations

• Scaling
• Rotation
• Translation
• Transformation matrix

Getting data in and out

• Loading external images by URL, other canvases or data URI
• Retrieving a PNG representation of the current canvas as a data URI

The excellent Canvas cheat sheet is a great reference of the commands available.

Getting Started

To use Canvas, you’ll need two things

• A Canvas tag in the HTML to place the drawing canvas
• JavaScript to do the drawing

The Canvas tag is basically an img tag without any data. You specify a width and a height for the drawing area. Instead of an alt attribute, you can enclose HTML within the canvas tag itself for alternative content.

Example of a Canvas tag:

<canvas id="myDrawing" width="200" height="200">
<p>Your browser doesn't support canvas.</p>
</canvas>

With a Canvas element in the HTML, we’ll add the JavaScript. We need to reference the Canvas element, check the browser is Canvas-compatible and create a drawing context:

var drawingCanvas = document.getElementById('myDrawing');

// Check the element is in the DOM and the browser supports canvas
if(drawingCanvas.getContext) {
    // Initaliase a 2-dimensional drawing context
    var context = drawingCanvas.getContext('2d');

    //Canvas commands go here

}

Checking for the getContext() method on a canvas DOM object is the standard way of determining canvas compatibility.

The context variable now references a Canvas context and can be drawn on.

Basic Drawing

So, let’s get started with an example to demonstrate the basics. We’re going to draw a smiley face, similar to the one on the Acid2 reference rendering.

If we think about the face as a set of basic shapes, we have:

1. A circle, with a black stroke and yellow fill for the face.
2. 2 circles with a black stroke and white fill and with an inner circle of filled green for the eyes.
3. A curve for the smile.
4. A diamond for the nose.

Let’s start by creating the round face:

// Create the yellow face
context.strokeStyle = "#000000";
context.fillStyle = "#FFFF00";
context.beginPath();
context.arc(100,100,50,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.fill();

You can see from the above that we start by defining some colours for the stroke and fill, then we create a circle (an arc with a radius of 50 and rotated through the angles of 0 to 2*Pi radians). Finally, we apply the stroke and fill that has been defined previously.

This process of setting styles, drawing to co-ordinates and dimensions and finally applying a fill or stroke is at the heart of Canvas drawing. When we add the other face elements in, we get:

Download the full source code of the smiley face example

Effects and Transformations

Let’s see how we can manipulate an existing image in canvas. We can load external images using the drawImage() method:

context.drawImage(imgObj, XPos, YPos, Width, Height);

Here’s the image we’re going to play with:

We’re going to give the image a red frame. For this we’ll use a rectangle and fill it with a radial gradient to give it a bit of texture.

//Create a radial gradient.
var gradient = context.createRadialGradient(90,63,30,90,63,90);
gradient.addColorStop(0, '#FF0000');
gradient.addColorStop(1, '#660000'); 

//Create radial gradient box for picture frame;
context.fillStyle = gradient;
context.fillRect(15,0,160,140);

//Load the image object in JS, then apply to canvas onload
var myImage = new Image();
myImage.onload = function() {
context.drawImage(myImage, 30, 15, 130, 110);
}
myImage.src = "cocktail.jpg";

To make our portrait look like it’s hung on a wall, we’ll add a drop shadow and rotate the image slightly so it looks at a slight angle.

A drop shadow will need to be applied to the frame.

//Create a drop shadow
context.shadowOffsetX = 10;
context.shadowOffsetY = 10;
context.shadowBlur = 10;
context.shadowColor = "black";

Download the full source code of the portrait example

To rotate the canvas, we use the rotate() method which takes a value in radians to rotate the canvas by. This only applies rotation to subsequent drawing to the canvas, so make sure you’ve put this in the right place in your code.

//Rotate picture
context.rotate(0.05);

This is what the finished frame looks like:

Download the full source code of the portrait example

Animation and Physics

Canvas drawings can be animated by repeatedly redrawing the canvas with different dimensions, positions or other values. With the use of JavaScript logic, you can also apply physics to your canvas objects as well.

Example uses:

• Bouncing Balls by Efeion
• js-fireworks by Kenneth Kufluk
• Using canvas in conjunction with the HTML 5 audio element and a Twitter mashup to create the HTML5 Canvas and Audio Experiment

Displaying Fancy Fonts

Canvas can be used as a way of displaying non-standard fonts into a web page as an alternative to technologies like sIFR. The Cufon project is one such implementation. Canvas-based font replacements like Cufon have advantages over sIFR, in that there are fewer resource overheads and no plug-in is required, however there are a few disadvantages:

• It generates lots of mark-up
• Fonts are embedded, therefore it breaks the license terms of many fonts
• Text can’t be selected

Fonts need to be converted for use in Cufon using the tools on the Cufon homepage.

Letting Your Users do the Drawing

JavaScript can interact with mouse and keyboard events, so you can create embedded drawing applications with canvas as the following examples demonstrate:

• Lightweight sketches with Tiny Doodle by Andrew Mason
• An MS paint clone in canvas by Christopher Clay

Making up for Browser CSS Deficiencies

Can’t wait for CSS3 support and want to add rounded corners, gradients or opacity without creating lots of images? Projects like jqcanvas add canvas tags behind standard HTML elements to add design to your web page.

Browser Support

The latest versions of Firefox, Safari, Chrome and Opera all enjoy reasonable to good support for Canvas.

What about Internet Explorer?

IE does not support canvas natively (as of IE8), however it has been given some compatibility thanks to the ExplorerCanvas project and is simply a matter of including an extra JavaScript file before any canvas code in your page. You can hide it from other browsers in the standard way, using conditional comments.

<!--[if IE]><script src="excanvas.js"></script><![endif]-->

ExplorerCanvas even extends canvas support to IE6, although it’s not perfect so don’t expect it to render as well as modern browsers that support canvas natively.

Accessibility

Canvas isn’t currently thought of as accessible as there is no mark-up generated or API for textual content to be read. Fallback HTML can be added manually inside the canvas tag, but this will never be good enough to represent the canvas in an accessible way.

Thinking About HTML 5 Canvas Accessibility by Steve Faulkner explains the problems in more detail. There is now a general consensus that accessibility needs to be addressed which has lead to the Protocols and Formats Working Group at the W3C recently opening a discussion into proposals for adding accessibility for Canvas with input from others.

In Summary

Although Canvas adds features to a page, I don’t think it has been particularly well thought out. In many ways it feels like a step into the past and represents a very old-fashioned way of drawing that is inferior to the modern XML-based SVG standard. It is pixel-based, as opposed to the nice vectors of SVG and to draw with it entails writing lots of unmanageable JavaScript. The lack of accessibility is also a big problem.

However, what Canvas has going for it, that SVG doesn’t, is that it can integrate with our existing web pages very easily. We can also work with canvas in much the same way we work with images in web pages.

By looking at the few examples in this article, we can get an idea of the variety of situations that Canvas can be applied to. Although the syntax may be frustrating, Canvas gives us drawing technology that we can use right away to enhance our pages.

Please give your thoughts, link to further examples or any feedback below.

Further Reading

• Doodle.js – a nice library for working with canvas
• Canvas Tutorial at Mozilla Developer Center
• HTML 5 canvas – the basics on the Opera Developer Community

Other Examples

• Live photo editing with Canvas Photo Demo
• Live video editing using canvas
• Online office applications with Mozilla Bespin
• Super Mario Bros
• Most of the Chrome Experiments.

Editor’s Note: Bruce Lawson will be doing a 1-hour tutorial called “How to build a HTML5 Web site” at the FOWD Tour.

Everyone is excited about the possibilities of HTML 5, but there’s a lot to learn and absorb as well. With that in mind, we’ve compiled a list of articles to get you started!

1. Yes, You Can Use HTML 5 Today! – A great beginning overview of HTML 5
2. Wikipedia: HTML 5 – A basic overview from Wikipedia
3. HTML 5 Cheat Sheet – A great quick guide to HTML 5 as a printable PDF
4. HTML 5 Demos – A great set of demos. Just view the source to see how they work.
5. HTML 5 Drag and Drop + Microformats = a whole world of possibilities – An example of how to use Drag-n-Drop in HTML 5
6. HTML 5 Gallery – See what’s possible with HTML 5
7. HTML 5 Forms Demo – A powerful demo of how forms work in HTML 5
8. HTML 5 Doctor – A great general resource on HTML 5
9. Headers in HTM 5 – A good article from HTML 5 Doctor on the Header element
10. Video elements – A useful article from HTML 5 Doctor on the Video element
11. Designing a blog with html5 – A tutorial on how to build a blog in HTML 5
12. How to get HTML5 working in IE and Firefox 2 – Another great article from HTML 5 Doctor
13. HTML 5 – Draft Standard – The whole spec, in all it’s scary technical detail
14. Semantics in HTML 5 – An opinion piece from A List Apart
15. Thinking About HTML 5 canvas Accessibility – Some quick thoughts on accessibility problems with the Canvas element
16. HTML 5: nav ambiguity resolved – A post by Zeldman on the HTML 5 Nav element
17. A Selection of Supported Features in HTML5 – A great list from Molly about which HTML 5 features are supported by which browsers
18. The WHATWG Blog – The Web Hypertext Application Technology Working Group – the folks working on the HTML 5 spec
19. HTML 5 canvas – A great in-depth tutorial on how the HTML 5 Canvas element works
20. Native Drag and Drop – A demo of how the Drag-n-Drop functionality works.
21. Bespin – A Mozilla Labs experiment on how to build an extensible Web code editor using HTML 5 technology.
22. When can I use… – Compatibility tables for features in HTML5, CSS3, SVG and other upcoming web technologies
23. Comparison of layout engines (HTML 5) – A good resource from Wikipedia

People to follow

These are the folks that are at the center of HTML 5 …

1. Ian Hickson (@hixie) – Editor of HTML 5 Spec. Currently working at Google.
2. Dave Hyatt – Co-creator of Firefox. Worked with Ian Hixie on HTML 5 spec. Working at Apple on the Safari and WebKit team.
3. Bruce Lawson (@brucel) – Works for Opera, evangelising open web standards as part of their Developer Relations team. Also a member of the Web Standards Project’s Accessibility Task Force.
4. Update: The other folks behind HTML 5 Doctor: @Rich_Clark, @Rem, @jackosborne, @akamike and @leads.
5. Molly Holzschlag – Group Lead for the Web Standards Project (WaSP) and an invited expert to the HTML and GEO working groups at the World Wide Web Consortium (W3C)
6. We’re probably forgetting others … please make suggestions in the comments