Engin Yağız Hatay gave a presentation on graphics and animation capabilities in web browsers. He discussed several technologies including CSS3, Canvas, SVG, and WebGL, and when each is best suited. He provided details on HTML5 Canvas capabilities and limitations. Hatay also covered browser support for these technologies and recommended several JavaScript libraries that can be used to create graphics and animations, including PaperJS, ProcessingJS, and ThreeJS. He concluded with a discussion of tools and frameworks for mobile graphics development.

1. Android Developer Days 2013
Engin Yağız Hatay

2. Who Am I ?
Engin Yağız Hatay
Computer Engineer
Geek @ Codemodeon

3. Outline
• Graphics in Browser
CSS3 /Canvas / SVG / WebGL
• HTML5 Canvas
• Browser Support
• Libraries : Paperjs / ProcessingJS / SeriouslyJS
• Canvas in Mobile
• Performance
• Mobile Graphics / Creative Coding
• Tools

4. http://www.creativeapplications.net/
Idea/Inspiration

5. Graphics in Browser
• CSS3 /Canvas / SVG / WebGL / Flash
• Which one to use ?
• User Interfaces ?
• Rounded Corners, Shadows ?
• 3D ?
• Games, Fractals?
• Animations ?
• Scalable images ?

6. HTML5 - Canvas
• 2D Drawing platform
• All you need is plain JavaScript
• Created by Apple (Used for dashboard
widgets)
• Now it’s an HTML5 Standard
• «Resolution dependent bitmap»
Which means every visual is represented by
pixels (non-vectoral)

7. HTML5-Canvas (cont.)
• You can save the resulting image as a .png or
.jpg.
• There are no DOM nodes for anything you
draw. It is all pixels.
• Not suited for Web site or application user
interfaces.
• Requires you to manually redraw each
element in the interface

8. Some Details
• «Proxying canvases to workers»
• What is a worker ?
• Workers are unable to reach DOM elements
• So we need a proxy
• canvasProxy = canvas . transferControlToProxy()
• canvasProxy . setContext(context)

9. SVG
• Resolution independent
• Allows scaling for any screen resolution.
• Very good support for animations. Elements can be
animated using a declarative syntax, or via JavaScript.
• Better solution for Web application user interfaces

10. WebGL
• WebGL is a cross-platform web standard
• Low-level 3D graphics API based on OpenGL
ES 2.0 (Shaders/GLSL)
• Exposed through the HTML5 Canvas element
as Document Object Model interfaces.
• canvas context mode :
CanvasRenderingContext2D
WebGLRenderingContext

11. Browser Support
Canvas
WebGL

12. Browser Support (cont.)
SVG
CSS

13. Libraries
• PaperJS – Hard to Debug – PaperScript
• Easel.js/Kinetic.js/Fabric.js
• ProcessingJS – Own language - .pde files
• RaphaelJS – SVG in every browser
• ThreeJS - http://threejs.org/ - 3D JS – WebGL
• SeriouslyJS – Interesting WebGL library
(Your shortcut to useful shaders – Great for
video and image manipulation)

14. Performance
• Hardware Acceleration
• Pre-rendering
Off-screen Canvas
• Batching canvas calls
Single draw call
• Renderers: special for
js,canvas and audio
Ex: Ejecta http://bit.ly/cQ743c

15. Tools
• JS Performance Monitor – Stats.js
https://github.com/mrdoob/stats.js
• Ai to Canvas – Drawing,Animation,Built-in
Events
http://visitmix.com/labs/ai2canvas/

16. Mobile Graphics / Creative Coding
openFrameworks (C++)
ProcessınG / Processıngjs
(Java/JS)
libCınder (C++)
Graphics Libraries (OpenGL, GLUT,)
Utilities (FreeType, Poco,Assimp)
Tools(OpenCV),MathLibraries
I/O,Sound,Video,Import-Export
Top IDEs (Processing has its own IDE)
Powerful
Large Communities (Processing & OF)
Cross Platform (Android/IOS/Mac/PC/Linux)

17. Thank You