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
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
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
Grand Finale - PaintJS
DEMO
Questions?