Heart & Sole - An introduction to HTML5 canvas

Editor's Notes

1. - 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
2. 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
3. - Reminisce briefly about how I started, at Redweb.\n
4. \n
5. - No plugins\n- Uses a JavaScript API\n
6. \n
7. \n
8. - 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
9. - 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
10. - 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
11. \n
12. \n
13. * This is a 3D game, which is using tech not available in all browsers yet.\n
14. \n
15. http://weavesilk.com/\n
16. http://rawkes.com/lab/google-balls-logo\n
17. http://rawkets.com\n
18. http://playbiolab.com/\n
19. 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
20. \n
21. - 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
22. - 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
23. - 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
24. - 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
25. - There is nothing to stop you using a library like jQuery to access the canvas element and the 2d rendering context.\n
26. \n
27. \n
28. \n
29. \n
30. \n
31. \n
32. - 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
33. - 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
34. - 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
35. - 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
36. - 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
37. - 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
38. - 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
39. - 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
40. - 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
41. - 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
42. - Twitter @robhawkes\n- Rawkes (blog) http://rawkes.com\n- Book (pre-order on Amazon) http://www.amazon.co.uk/gp/product/1430232919/\n
43. - 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