HTML5 has a bunch of cool features, which are now mostly supported by all major browsers on desktops and mobile devices. We will briefly introduce some of these features and explain how they fit into the HTML/CSS/JavaScript ecosystem. Then, we will talk about the HTML5 Canvas API, which can be used to draw shapes inside standard web pages and apply transformations and zooms.

1. D I N A G O L D S H T E I N
HTML5 Canvas

2. Agenda
 HTML5 Introduction
 Canvas Motivation
 Canvas Basics
 One Big Demo 

3. Why HTML5?
 Internet has changed a lot since 1996
 SpaceJam vs. Google Docs
 HTML5 is the latest HTML standard
 Delivers rich content without the need for external
plugins
 Replaces some scripting with more markup
 All major browsers support it (to some extent*)
 * http://html5test.com/

4. What’s New in HTML5?
 <canvas> element for 2D drawing
 <video> and <audio> for media playback
 Local storage support
 Geolocation API
 Web Workers for background calculations
 Semantic elements like <article>, <footer>,
<header>, <aside>
 Tons of input controls: color, email, date, time
 And much more…

5. What Can Canvas do for You?
 Well, pretty much anything…
 Cloth Experiment
 Angry Birds
 Shared Canvas
 Lots of other (less cool) examples

6. Canvas Basic
 The Canvas element allows you to draw 2D graphics,
on the fly, on a Web page, using JavaScript
 The HTML5 canvas is a lot like a real-world painting
canvas
 You can use different colors and different brushes
 You can rotate it or move it around
 Anything you paint on it stays in place until you delete it
 You can resize it
 But it’s also a bit different, duh 

7. Hello Canvas
DEMO

8. Canvas Basic Recipe
 Get Canvas element
 Get drawing context from element
 Repeat:
 Save context properties
 Set new properties: fill style, stroke style, transform
 Begin path
 Define path
 Close path (if needed)
 Fill and/or stroke
 Restore original properties

9. What is a Path?
 A path is a series of points connected by lines
 Use beginPath to initialize a path
 Use lineTo, arcTo, etc. to connect lines
 Stroke and/or fill as see fit
 A path can be closed
 Use closePath to connect last point to first point
 A path doesn’t have to be continuous
 Use moveTo to create discontinuous sections in a path

10. Paths
DEMO

11. Canvas Features
Styling
• fillStyle
• strokeStyle
• lineCap
• lineWidth
Shapes
• rect
• fillRect
• srokeRect
• clearRect
• arc
Paths
• fill
• stroke
• beginPath
• closePath
• moveTo
Lines
• lineTo
• quadraticCurveTo
• bezierCurveTo
• arcTo
Text
• font
• fillText
• strokeText
• measureText
Images
• drawImage
Pixel Manipulation
• createImageData
• getImageData
• putImageData
Transformations
• scale
• rotate
• translate
• transform

12. Transformations
DEMO

13. Grand Finale - PaintJS
DEMO

14. Questions?