DINA GOLDSHTEIN

HTML5 Canvas

Agenda

HTML5 IntroductionCanvas MotivationCanvas BasicsOne Big Demo

Why HTML5?

Internet has changed a lot since 1996SpaceJam vs. Google Docs

HTML5 is the latest HTML standardDelivers rich content without the need for

external pluginsReplaces some scripting with more markupAll major browsers support it (to some extent*)

* http://html5test.com/

What’s New in HTML5?

<canvas> element for 2D drawing<video> and <audio> for media playbackLocal storage supportGeolocation APIWeb Workers for background calculationsSemantic elements like <article>, <footer>, <header>, <aside>

Tons of input controls: color, email, date, time

And much more…

What Can Canvas do for You?

Well, pretty much anything…

Cloth ExperimentAngry BirdsShared Canvas

Lots of other (less cool) examples

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

Hello Canvas

DEMO

Canvas Basic Recipe

Get Canvas elementGet drawing context from elementRepeat:

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

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

Paths

DEMO

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

Transformations

DEMO

Grand Finale - PaintJS

DEMO

Questions?