Wrong confirmation ID

Email
Favorite
Favorited ×
Download
Embed
Private Content
Copy and paste this code into your blog or website Copy Customize… Close
We have emailed the verification/download link to "".
Login to your email and click the link to download the file directly.

To request the link at a different email address, update it here. Close
Validation messages. Success message. Fail message.

Check your bulk/spam folders if you can't find our mail.

Tweet

+ Follow

Heart & Sole - An introduction to HTML5 canvas

by Rob Hawkes on Jan 29, 2011

5,981 views

More…

Less

12 Embeds 283

http://lanyrd.com	193
http://chokococo.com	30
http://rachaely.com	27
http://gbwp	14
http://www.georgebuckingham.com	4
http://www.georgebuckingham.net	4
http://speakerrate.com	3
http://paper.li	2
http://joanmoriyama.blogspot.com	2
http://twitter.com	2
http://savedbythegoog.appspot.com	1
http://spkr8-staging.herokuapp.com	1

More...

Statistics

Favorites: 17
Downloads: 0
Comments: 1
Embed Views: 283
Views on SlideShare: 5,698
Total Views: 5,981

1–1 of 1 previous next

M Haidar Hanif , Technology Analyst Fascinating as always. 1 year ago Reply
Are you sure you want to Yes No

- So, as you probably already know, I’m here to get you excited about HTML5 canvas.\n- Specifically, my job is to convince you to start playing with it today. Well, tomorrow…\n
First, there are a couple of things you should be aware of…\n- I’ve made this talk as simple as possible, but there is still going to be some JavaScript involved. I can’t avoid that, I’m afraid! It’s nothing crazy though, as you’ll soon see.\n- Regardless, there are plenty of pretty pictures, so there’s something for the graphic designers in the room as well.\n- I promise you, canvas isn’t scary. :)\n
- Reminisce briefly about how I started, at Redweb.\n
\n
- No plugins\n- Uses a JavaScript API\n
\n
\n
- A bit like the old Microsoft Paint, but also nothing like it at the same time.\n- They’re both bitmap-based 2D drawing platforms.\n- It’s also been described by Christian Heilmann as an Etch-a-Sketch within the browser. I kinda like that comparison.\n- 3D will be achieved via WebGL.\n
- SVG is another drawing platform that is available within the browser.\n- Canvas is bitmap, SVG is vector.\n- In canvas everything is drawn as a single flat image (ala. old MS Paint), which means you can’t edit something once it’s drawn; you’d have to erase it and draw it again (like an Etch-a-Sketch).\n- In SVG everything is drawn as a separate DOM element, which allows you to edit individual elements without affecting anything else.\n- SVG isn’t part of HTML5, but it is supported by most browsers.\n
- Most modern browsers support canvas.\n- If you want to use it in IE8 and under you’ll need to include something like the ExplorerCanvas script in your page.\n- ExplorerCanvas is really cool and has been made by a bunch of crazy people at Google.\n- However, it’s not a perfect solution – you’ll experience performance issues and the like.\n- Fortunately IE9 beta supports canvas out of the box, and it’s seriously fast.\n
\n
\n
* This is a 3D game, which is using tech not available in all browsers yet.\n
\n
http://weavesilk.com/\n
http://rawkes.com/lab/google-balls-logo\n
http://rawkets.com\n
http://playbiolab.com/\n
You can even use canvas to detect nudity. It’s pretty fucking cool!\n\nhttp://www.monocubed.com/lab/\nhttp://www.patrick-wied.at/static/nudejs/\nhttps://github.com/liuliu/ccv/tree/current/js/\n
\n
- Height and width need to be set in the element.\n- Using CSS will just scale the canvas and will not produce the effect you want.\n
- The 2d rendering context is where everything is drawn.\n- The canvas element is actually a wrapper for the 2d rendering context, providing an API.\n- To be clear, you draw on to the 2d rendering context, not the canvas element.\n- You access the 2d rendering context through the canvas element.\n
- The origin (0, 0) is at the top left\n- X moves positively right, and negatively left\n- Likewise, Y moves positively down and negatively left\n
- First you must access the canvas element, this way uses pure JavaScript.\n- The 2D rendering context can then be accessed by calling the getContext method.\n
- There is nothing to stop you using a library like jQuery to access the canvas element and the 2d rendering context.\n
\n
\n
\n
\n
\n
\n
- There are a whole bunch of other things we haven’t covered, like text, shadows, line styles, saving the drawing state, and transformations (rotate, scale, translate).\n- You could write a book detailing every little thing that you can do in canvas. Which is pretty lucky, considering that’s exactly what I’ve done! I’ll leave the pimping till the end, though, I promise…\n
- Technically pixel manipulation is part of the drawing features, but it deserve to be treated separately.\n- There is just too much cool stuff you can do with it.\n
- Drawing an image on the canvas can be as simple of complex as you like\n- You can transpose an entire image element onto the canvas\n- Or you can crop out part of an image and place just that on the canvas\n- You can even resize the image when you place it on the canvas\n- The coolest thing is that you can use a video as the source image via the HTML5 video tag\n- When you use a video the current frame will be used as the source image\n
- getImageData is definitely one of my favourite features of canvas. Possibly even my favourite feature overall!\n- It allows you to access the pixel data values of an image on the canvas, whether that is a basic image or a still from a HTML5 video.\n- The pixel data returned is in the format of an array.\n- On it’s own it’s nothing more than a gimmicky colour picker, but when used as part of something larger it starts to get cool.\n- One thing to note is that you can’t normally get the pixel data for images not on the same domain as the canvas.\n- This is to protect against all kinds of nasty things.\n- However, there are ways to get around it.\n
- Canvas ambilight is an experiment designed to show off the integration between canvas and HTML5 video.\n- It utilises the drawImage and getImageData methods to grab a frame from the video every few seconds and average its colour values.\n- This in turn allows for a linear gradient to be drawn that matches those colours.\n- Add an image mask over the top of the canvas and you have yourself an impressive looking dynamic ambilight system.\n- Close pixelate works in a similar way to the ambilight example, in that it averages colour values in particular areas of the image, resulting in a pixelated effect.\n
- We’ve had my favourite feature of canvas, now for my favourite use of canvas – animation.\n- Drawing shapes is great and all, but it’s when you start to move them that things get fun.\n- If you then make those moving shapes interact somehow then you’ve got yourself a pretty powerful system.\n
- Thankfully it's not too complicated to construct an animation engine in canvas.\n- You just need a method of remembering what shapes are on the canvas and a way of redrawing them really quickly.\n
- Drawable elements are stored as objects.\n- By treating these elements as JavaScript objects you can store and edit an unlimited amount of custom values; be that position, size, colour, weight, friction, anything!\n- All objects are stored in an array.\n- Run a timeout function every 33ms (roughly equal to 30fps).\n- Make any changes to the objects.\n- Clear the canvas.\n- Loop through and redraw every shape.\n- Simplified example, but it’s the gist of what happens.\n
- There is much debate about wether HTML5 is going to be a Flash killer.\n- My opinion is to use the right tool for the right job. Stop comparing them.\n- Canvas does some stuff, Flash does others.\n- The missing piece for canvas to go mainstream is a GUI for developing canvas applications, but these are starting to appear, like the Radi app and Adobe integrating canvas support into the Flash editor.\n
- Canvas has a bright future, it’s already being championed by companies like Microsoft, Apple, Opera, and Mozilla.\n- Easy integration with other HTML5 technologies is a killer feature. For example, WebSockets.\n- It’s already flexible and powerful, but we’re no where near witnessing it’s full potential.\n- Hardware acceleration.\n
- Twitter @robhawkes\n- Rawkes (blog) http://rawkes.com\n- Book (pre-order on Amazon) http://www.amazon.co.uk/gp/product/1430232919/\n
- Before I finish, I’d just like to thank Tom, Alex and the rest of the team for inviting me along and giving me the chance to speak to you guys. They’ve all put incredible amounts of time into organising this for you, the whole evening is going to be amazing.\n- I’d love to answer any questions that you might have, either about the talk, or canvas in general. So fire away!\n

17 Favorites

jackzheng Tags canvas 2 weeks ago
mosoauu Tags html5canvas 1 month ago
philipknape 3 months ago
Daniele Moraschi , Partner & Senior Developer at asaquattrocento snc 6 months ago
Sean Yo , System Analyst at University of Guelph Tags html5 canvas 1 year ago
gagadream Tags html5 1 year ago
iqwebdev 1 year ago
feredus 1 year ago
weiweisun 1 year ago
John Kim , Specialist at LG CNS 1 year ago

Heart & Sole - An introduction to HTML5 canvas — Presentation Transcript

No transcript available.

Heart & Sole - An introduction to HTML5 canvas

by Rob Hawkes on Jan 29, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

12 Embeds 283

Statistics

Heart & Sole - An introduction to HTML5 canvas — Presentation Transcript