Loading...

This presentation is an HTML5 website

Press key to advance.

Slides controls
  • and to move around.
  • Ctrl/Command and + or - to zoom in and out if slides don’t fit.
  • S to view page source.
  • T to change the theme.
  • H to toggle syntax highlight.
  • N to toggle speaker notes.
  • 3 to toggle 3D effect.
  • 0 to toggle help.

Drawing stuff with HTML5

A brief overview of HTML5 drawing techniques

Agenda - Table of Contents

Drawing in HTML5

What are the options?

  • Canvas API
  • SVG
  • WebGL

Canvas

The canvas element is a bitmap drawing API, and once you’ve committed to a set of pixels, you’re stuck with them.

Drawing with Canvas

What is it good for?

The canvas element is good for pixel manipulation and highly active animations.

  • Javascript-centric
  • Immediate-mode
  • Pixel-oriented
  • Decent performance at 60 FPS

Canvas is best suited for

  • drawing shapes
  • filling colours
  • creating gradients and patterns
  • rendering text
  • copying images, video frames, and other canvases
  • manipulating pixels
  • exporting the contents of a canvas to a static file.

SVG

  • W3C spec
  • SVG is the alternative drawing API.
  • It’s vector-based and does support layers.
  • Retain-mode
  • SVG also exists in the DOM, making it easy to attach event handlers for interactivity, and it’s easier to deal with collision detection (in games, for example).
  • It also supports animation either through SMIL or JavaScript.

Drawing with SVG

  • You can draw an SVG file to the canvas just like PNGs
  • More standard to use the HTML DOM as the “canvas”
  • There’s an excellent JavaScript library called Raphaël that uses SVG to render images and animations.
  • Import SVG objects and “paths” and manipulate with Raphael

What is it good for?

  • importing existing content (Illustrator)
  • Hit detection
  • Event handling
  • Animation, Effects, Events, Matrix math, & lots more

WebGL

  • Subset of OpenGL ES 2.0
  • 3D Graphics using Javascript + GL Shader language
  • Load object files from Blender, Maya via Ajax or script tag
  • Super fast

Very cool but hard to program. Fun demos below:

Hybrids

It’s possible to use all 3 drawing styles on a single web page.

Is it possible to draw a 3D canvas onto a 2D canvas or vice versa?

More info