2. HTML5 HTML5 Canvas May 18, 2011 Subject: CPSC 473 Professor: Kenytt D. Avery Student: Scott Jung

3. 1 Agenda What is HTML5? Awesome Demos What is Canvas?

4. 2 The 5 th Revision of HTML What is HTML 5? ▶ HTML5 is a W3C " working draft "—which is still being developed as the next generation of HTML. ▶ It aims to reduce the need for proprietary “ plug-in-based” internet application technologies such as Adobe Flash, Microsoft Silverlight, and Sun JavaFX.

5. What is HTML 5? HTML5 New Features  HTML5 is just W3C Working Draft. But  Some core features are already supported by a lot of browsers “HTML5 is for IMPROVING your web application.” 3

6. 4 What is Canvas? Canvas ▶ Useful for Graphs, Applications, Games, etc. ▶ Draw images using 2D drawing API - Lines, curves, shapes, fills, etc. ▶ Dynamic and interactive graphics

7. 5 What is Canvas? 2D Animation

8. 6 What is Canvas? 3D Graphics ▶ WebGL is a context of the canvas HTMLcanvas element that provides a 3D computer graphics API without the use of plug-ins.APIplug-ins ▶ WebGL is a Web-based Graphics Library.Web ▶ It uses the HTML5 canvas elementHTML5 element

9. Awesome Demo 7 http://www.addyosmani.com/resources/googlebox/

10. Awesome Demo 8 http://deanm.github.com/pre3d/monster.html

11. Conclusion 9 HTML5 Canvas

12. 8 Reference [1] Peter Traeg. “HTML5 Overview”. VDUNY, 01/2011. [2] Wonsuk Lee. “HTML5 Technology”. ETRI, 03/2010 [3] "HTML5 differences from HTML4". W3C, 05/ 2011.

13. Thank you!!