HTML5 Canvas

1-day HTML5 Canvas Web Design Course — H5C

HTML5 Canvas Training Course Overview

This HTML5 training course enables the student to understand and use the HTML5 canvas element and its 2D drawing API.

In addition to teaching all the basic drawing techniques – and a substantial proportion of the more advanced ones – this HTML5 training course devotes particular attention to fallbacks and workarounds for older browsers.

The techniques described stick closely to W3C web standards – using graceful degradation – to combine usability and accessibility with the maximum practical functionality.

Course contents — 1 Introduction: The Absolute Basics

What is HTML5 Canvas?
The very basic syntax
Basic failover – for non-supporting browsers
Course setup:
- Tools – browsers
- Tools – text editors and IDEs
- Exercise files
- Media assets
Examples of simple drawing techniques – lines, arcs, polygons, text, etc
Edit and run a simple animation

Course contents — 2 What you can do with HTML5 Canvas?

Examples of creative Canvas usage
Demo web sites and applications:
- HTML5 Canvas – Collage
- iGrapher
- Raphaël drawing library
- Cloth simulation
- CanvasMol
- 9Elements Particle Play
- Arcade Fire
- Sketchpad
- Some games

Course contents — 3 Understanding and Setting up Canvas

Understanding canvases and the Canvas state
Relationship to the DOM – not in it
Use HTML5 Canvas for dynamic, 'on the fly' drawing
Use SVG for:
- Drawings that integrate with other page content
- Drawings you want to manipulate later
- Accessibility
Combining HML5 Canvas with SVG
- Embedding one in the other
- Using one for fallback from the other
The HTML5 canvas tag – properties and methods
- Default rendering – invisible
- toDataURL()
- getContext()
- Styling with CSS
Setting up the Canvas 2D drawing context
- Get reference to canvas element
- Get the drawing context – getContext()
- Start the drawing API

Course contents — 4 Basic Drawing with the 2D Drawing API

Colors and styles
Lines and rectangles
Arcs and paths
Bézier and quadratic curves
Text rendering

Course contents — 5 Moving On – Intermediate Drawing Techniques

Shadows
Patterns
Gradients
Clipping paths
Drawing images and video

Course contents — 6 Advanced Drawing Techniques

Transformations – using translate
Scaling – with scale
Rotation – with rotate
Custom transformations
Compositing – with globalAlpha
Pixel twiddling

Course contents — 7 Building Complete Drawings and Pages

A slideshow – with controls and transitions
A basic animation
Embedding Canvas in a complete page

Course Objectives

On completion of this HTML5 training course, the student will be able to:

Understand the relationship between HTML5 Canvas and alternative web graphic techniques
Decide when HTML5 Canvas is the most appropriate web graphic technique to use
Embed canvases in web pages
Script (program) simple HTML5 Canvas animations
Combine HTML5 Canvas with CSS, SVG, HTML5 video, PNG and other web content
Deploy canvas graphics and animations in browsers withut native support
Provide fallbacks from canvas to SVG and Flash for non-supporting browsers

Target Audience

Web developers – i.e. programmers
Technically-minded web designers

Training Pre-requisites

Good knowledge of standards-based HTML, XHTML and CSS
Substantial experience of hand-coding HTML, XHTML and CSS
Some experience of manipulating web content with JavaScript

The first of these is provided by the following WDA courses:

HTML-01 or HTML-02
CSS-02 or CSS-01 + CSS-02

Previous experience of HTML5 is not required, although it would be a benefit.

Previous programming experience is not required for this course, but some familiarity with the use of JavaScript is expected.

Experience of merely embedding or linking-in JavaScript to alter page content should be sufficient – please contact us via the enqury form if you are at unsure.

Training Style

This is very much a hands-on, practical, course.

Although great emphasis is placed on developing proper understanding of the concepts, during the day students should expect to spend over half their time doing hands-on exercises.