The document discusses the features and capabilities of HTML5, particularly focusing on the <canvas> element for 2D drawing using JavaScript. It highlights new elements and APIs introduced in HTML5, such as <video>, <audio>, and local storage, while providing a basic recipe for using the canvas, including paths and drawing techniques. Additionally, it includes a demo and a list of canvas features for creating graphics, emphasizing the versatility and power of HTML5 in web development.

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?