You are previewing Supercharged JavaScript Graphics.

Supercharged JavaScript Graphics

Cover of Supercharged JavaScript Graphics by Raffaele Cecco Published by O'Reilly Media, Inc.
  1. Supercharged JavaScript Graphics
    1. SPECIAL OFFER: Upgrade this ebook with O’Reilly
    2. Preface
      1. Audience and Assumptions
      2. Organization
      3. Conventions Used in This Book
      4. Using Code Examples
      5. Safari® Books Online
      6. How to Contact Us
      7. Acknowledgments
    3. 1. Code Reuse and Optimization
      1. Keeping It Fast
      2. What and When to Optimize
      3. Homespun Code Profiling
      4. Optimizing JavaScript
      5. Optimizing jQuery and DOM Interaction
      6. Other Resources
    4. 2. DHTML Essentials
      1. Creating DHTML Sprites
      2. Converting into a jQuery Plug-in
      3. Timers, Speed, and Frame Rate
      4. Internet Explorer 6 Background Image Caching
    5. 3. Scrolling
      1. CSS-Only Scrolling Effects
      2. Scrolling with JavaScript
    6. 4. Advanced UI
      1. HTML5 Forms
      2. Using JavaScript UI Libraries
      3. Creating UI Elements from Scratch
    7. 5. Introduction to JavaScript Games
      1. Game Objects Overview
      2. The Game Code
    8. 6. HTML5 Canvas
      1. Canvas Support
      2. Bitmaps, Vectors, or Both?
      3. Canvas Limitations
      4. Canvas Versus SVG
      5. Canvas Versus Adobe Flash
      6. Canvas Exporters
      7. Canvas Drawing Basics
      8. Animating with Canvas
      9. Canvas and Recursive Drawing
      10. Replacing DHTML Sprites with Canvas Sprites
      11. A Graphical Chat Application with Canvas and WebSockets
    9. 7. Vectors for Games and Simulations
      1. Operations on Vectors
      2. Creating a JavaScript Vector Object
      3. A Cannon Simulation Using Vectors
      4. Rocket Simulation
    10. 8. Google Visualizations
      1. Limitations
      2. Chart Glossary
      3. Image Charts
      4. Interactive Charts
    11. 9. Reaching the Small Screen with jQuery Mobile
      1. jQuery Mobile
      2. TilePic: A Mobile-Friendly Web Application
      3. PhoneGap
    12. 10. Creating Android Apps with PhoneGap
      1. Installing PhoneGap
      2. Creating a PhoneGap Project in Eclipse
    13. Index
    14. About the Author
    15. Colophon
    16. SPECIAL OFFER: Upgrade this ebook with O’Reilly
O'Reilly logo

A Graphical Chat Application with Canvas and WebSockets

Drawing pretty graphics is all very well, but in the following example, we will look at a more practical application for Canvas: a pseudo-3D chat application (Figure 6-15). This example will also demonstrate how to combine Canvas with other HTML5 features like WebSockets.

A pseudo-3D graphical chat application using HTML5 Canvas and WebSockets

Figure 6-15. A pseudo-3D graphical chat application using HTML5 Canvas and WebSockets

The WebSockets Advantage

Canvas has enjoyed its fair share of the HTML5 limelight, and another equally exciting (but possibly less well known) HTML5 element is WebSockets. Although this book is about graphics, it’s worth discussing why WebSockets are significant for modern web applications and how they can be integrated with Canvas.

The Web typically transmits its data between servers and client browsers using the HTTP protocol, but HTTP has certain limitations (unlike shiny new WebSockets) that make it unsuitable for high-speed, bidirectional network communication:

It’s a one-way street

The client web browser requests data from the server and the server then obliges. The server cannot “push” information to the client without being asked for it specifically.

It carries significant overhead

HTTP data carries a lot of baggage in the form of header information. Requesting just one byte of data can result in potentially hundreds of bytes of additional “invisible” header information also ...

The best content for your career. Discover unlimited learning on demand for around $1/day.