Html5 Canvas and Mobile Graphics

2,007 views

Published on

Graphics in Browser CSS3 /Canvas / SVG / WebGL

Published in: Technology, Art & Photos
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,007
On SlideShare
0
From Embeds
0
Number of Embeds
33
Actions
Shares
0
Downloads
21
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide
  • http://www.html5rocks.com/en/tutorials/canvas/performance/http://www.useragentman.com/blog/2012/09/23/cross-browser-gpu-acceleration-and-requestanimationframe-in-depth/
  • Html5 Canvas and Mobile Graphics

    1. 1. Android Developer Days 2013Engin Yağız Hatay
    2. 2. Who Am I ?Engin Yağız HatayComputer EngineerGeek @ Codemodeon
    3. 3. Outline• Graphics in BrowserCSS3 /Canvas / SVG / WebGL• HTML5 Canvas• Browser Support• Libraries : Paperjs / ProcessingJS / SeriouslyJS• Canvas in Mobile• Performance• Mobile Graphics / Creative Coding• Tools
    4. 4. http://www.creativeapplications.net/Idea/Inspiration
    5. 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. 6. HTML5 - Canvas• 2D Drawing platform• All you need is plain JavaScript• Created by Apple (Used for dashboardwidgets)• Now it’s an HTML5 Standard• «Resolution dependent bitmap»Which means every visual is represented bypixels (non-vectoral)
    7. 7. HTML5-Canvas (cont.)• You can save the resulting image as a .png or.jpg.• There are no DOM nodes for anything youdraw. It is all pixels.• Not suited for Web site or application userinterfaces.• Requires you to manually redraw eachelement in the interface
    8. 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. 9. SVG• Resolution independent• Allows scaling for any screen resolution.• Very good support for animations. Elements can beanimated using a declarative syntax, or via JavaScript.• Better solution for Web application user interfaces
    10. 10. WebGL• WebGL is a cross-platform web standard• Low-level 3D graphics API based on OpenGLES 2.0 (Shaders/GLSL)• Exposed through the HTML5 Canvas elementas Document Object Model interfaces.• canvas context mode :CanvasRenderingContext2DWebGLRenderingContext
    11. 11. Browser SupportCanvasWebGL
    12. 12. Browser Support (cont.)SVGCSS
    13. 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 forvideo and image manipulation)
    14. 14. Performance• Hardware Acceleration• Pre-renderingOff-screen Canvas• Batching canvas callsSingle draw call• Renderers: special forjs,canvas and audioEx: Ejecta http://bit.ly/cQ743c
    15. 15. Tools• JS Performance Monitor – Stats.jshttps://github.com/mrdoob/stats.js• Ai to Canvas – Drawing,Animation,Built-inEventshttp://visitmix.com/labs/ai2canvas/
    16. 16. Mobile Graphics / Creative CodingopenFrameworks (C++)ProcessınG / Processıngjs(Java/JS)libCınder (C++)Graphics Libraries (OpenGL, GLUT,)Utilities (FreeType, Poco,Assimp)Tools(OpenCV),MathLibrariesI/O,Sound,Video,Import-ExportTop IDEs (Processing has its own IDE)PowerfulLarge Communities (Processing & OF)Cross Platform (Android/IOS/Mac/PC/Linux)
    17. 17. Thank You

    ×