HTML5 Canvas

1-day HTML5 Canvas Web Design Course — HTML5-04

HTML5 Canvas TrainingCourse 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.

HTML5 Canvas TrainingCourse Contents

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

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

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

Basic Drawing with the 2D Drawing API

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

Moving On – Intermediate Drawing Techniques

  • Shadows
  • Patterns
  • Gradients
  • Clipping paths
  • Drawing images and video

Advanced Drawing Techniques

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

Building Complete Drawings and Pages

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

HTML5 Canvas TrainingFurther Details

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.