book

Pro HTML5 Programming: Powerful APIs for Richer Internet Application Development

Name: Pro HTML5 Programming: Powerful APIs for Richer Internet Application Development
ISBN: 9781430227908

by Peter Lubbers, Brian Albers, Frank Salim

August 2010

Intermediate to advanced

304 pages

6h 44m

English

Apress

Read now

Unlock full access

Copyright
Foreword
About the Authors
About the Technical Reviewer
Acknowledgments
Introduction
0.1. Who This Book Is For0.2. An Overview of This Book0.3. Example Code and Companion Web Site0.4. Contacting the Authors
1. Overview of HTML5
1.1. The Story So Far—The History of HTML51.2. The Myth of 2022 and Why It Doesn't Matter1.3. Who Is Developing HTML5?1.4. A New Vision1.4.1. Compatibility and Paving the Cow Paths1.4.2. Utility and the Priority of Constituencies1.4.2.1. Secure by Design1.4.2.2. Separation of Presentation and Content1.4.3. Interoperability Simplification1.4.4. Universal Access1.5. A Plugin–Free Paradigm1.5.1. What's In and What's Out?1.6. What's New in HTML5?1.6.1. New DOCTYPE and Character Set1.6.2. New and Deprecated Elements1.6.3. Semantic Markup1.6.4. Simplifying Selection Using the Selectors API1.6.5. JavaScript Logging and Debugging1.6.6. window.JSON1.6.7. DOM Level 31.6.8. Monkeys, Squirrelfish, and Other Speedy Oddities1.7. Summary
2. Using the HTML5 Canvas API
2.1. Overview of HTML5 Canvas2.1.1. History2.1.2. What Is a Canvas?2.1.3. Canvas Coordinates2.1.4. When Not to Use Canvas2.1.5. Fallback Content2.1.6. CSS and Canvas2.1.7. Browser Support for HTML5 Canvas2.2. Using the HTML5 Canvas APIs2.2.1. Checking for Browser Support2.2.2. Adding a Canvas to a Page2.2.3. Applying Transformations to Drawings2.2.4. Working with Paths2.2.5. Working with Stroke Styles2.2.6. Working with Fill Styles2.2.7. Filling Rectangular Content2.2.8. Drawing Curves2.2.9. Inserting Images into a Canvas2.2.10. Using Gradients2.2.11. Using Background Patterns2.2.12. Scaling Canvas Objects2.2.13. Using Canvas Transforms2.2.14. Using Canvas Text2.2.15. Applying Shadows2.2.16. Working with Pixel Data2.2.17. Implementing Canvas Security2.3. Building an Application with HTML5 Canvas2.3.1. Practical Extra: Full Page Glass Pane2.4. Summary
3. Working with HTML5 Audio and Video
3.1. Overview of HTML5 Audio and Video3.1.1. Video Containers3.1.2. Audio and Video Codecs3.1.2.1. The Codec Wars and the Tentative Truce3.1.3. Audio and Video Restrictions3.1.4. Browser Support for HTML5 Audio and Video3.2. Using the HTML5 Audio and Video APIs3.2.1. Checking for Browser Support3.2.2. Understanding Media Elements3.2.2.1. The Basics: Declaring Your Media Element3.2.2.2. Using the Source3.2.2.3. Taking Control3.2.3. Working with Audio3.2.3.1. Audio Activation3.2.4. Working with Video3.2.4.1. Creating a Video Timeline Browser3.2.4.2. Adding the Video and the Canvas Element3.2.4.3. Adding Variables3.2.4.4. Adding the updateFrame Function3.2.4.5. Adding the startVideo Function3.2.4.6. Handling User Input3.2.4.7. Adding the stopTimeline Function3.2.5. Practical Extras3.2.5.1. Background Noise in a Page3.2.5.2. Mouseover Video Playback3.3. Summary
4. Using the HTML5 Geolocation API
4.1. About Location Information4.1.1. Latitude and Longitude Coordinates4.1.2. Where Does Location Information Come From?4.1.3. IP Address Geolocation Data4.1.4. GPS Geolocation Data4.1.5. Wi-Fi Geolocation Data4.1.6. Cell Phone Geolocation Data4.1.7. User–Defined Geolocation Data4.2. Browser Support for HTML5 Geolocation4.3. Privacy4.3.1. Triggering the Privacy Protection Mechanism4.3.2. Dealing with Location Information4.4. Using the HTML5 Geolocation API4.4.1. Checking for Browser Support4.4.2. Position Requests4.4.2.1. One-Shot Position Requests4.4.2.1.1. The updateLocation() Function4.4.2.1.2. The handleLocationError() Function4.4.2.1.3. Optional Geolocation Request Attributes4.4.2.2. Repeated Position Updates4.5. Building a Real-Time Application with HTML5 Geolocation4.5.1. Writing the HTML Display4.5.2. Processing the Geolocation Data4.5.3. The Final Code4.6. Practical Extras4.6.1. What's My Status?4.6.2. Show Me on a Google Map4.7. Summary

5. Using the Communication APIs
5.1. Cross Document Messaging5.1.1. Understanding Origin Security5.1.2. Browser Support for Cross Document Messaging5.1.3. Using the postMessage API5.1.3.1. Checking for Browser Support5.1.3.2. Sending Messages5.1.3.3. Listening for Message Events5.1.4. Building an Application Using the postMessage API5.1.4.1. Building the Portal Page5.1.4.2. Building the Chat Widget Page5.1.4.3. The Final Code5.1.4.4. The Application in Action5.2. XMLHttpRequest Level 25.2.1. Cross-Origin XMLHttpRequest5.2.2. Progress Events5.2.3. Browser Support for HTML5 XMLHttpRequest Level 25.2.4. Using the XMLHttpRequest API5.2.4.1. Checking for Browser Support5.2.4.2. Making Cross-Origin Requests5.2.4.3. Using Progress Events5.2.5. Building an Application Using XMLHttpRequest5.2.5.1. The Final Code5.2.5.2. The Application in Action5.3. Practical Extras5.3.1. Structured Data5.3.2. Framebusting5.4. Summary
6. Using the HTML5 WebSocket API
6.1. Overview of HTML5 WebSockets6.1.1. Real-Time and HTTP6.1.2. Understanding HTML5 WebSockets6.1.2.1. The WebSocket Handshake6.1.2.2. The WebSocket Interface6.1.2.3. A Dramatic Reduction in Unnecessary Network Traffic and Latency6.2. Browser Support for HTML5 WebSockets6.3. Writing a Simple Echo WebSocket Server6.4. Using the HTML5 WebSocket API6.4.1. Checking for Browser Support6.4.2. Basic API Usage6.4.2.1. Creating a WebSocket object and Connecting to a WebSocket Server6.4.2.2. Adding Event Listeners6.4.2.3. Sending Messages6.4.2.4. Running the WebSocket Page6.5. Building an Application with HTML5 WebSockets6.5.1. Coding the HTML File6.5.2. Adding the WebSocket Code6.5.3. Adding the Geolocation Code6.5.4. Putting It All Together6.5.5. The Final Code6.6. Summary
7. Using the HTML5 Forms API
7.1. Overview of HTML5 Forms7.1.1. HTML Forms vs. XForms7.1.2. Functional Forms7.1.3. Browser Support for HTML5 Forms7.1.4. An Input Catalog7.2. Using the HTML5 Forms APIs7.2.1. New form attributes and functions7.2.1.1. The placeholder Attribute7.2.1.2. The autocomplete Attribute7.2.1.3. The autofocus Attribute7.2.1.4. The list Attribute and the datalist Element7.2.1.5. The min and max Attributes7.2.1.6. The step Attribute7.2.1.7. The valueAsNumber Function7.2.1.8. The required Attribute7.2.2. Checking forms with validation7.2.2.1.7.2.2.1.1. The valueMissing Constraint7.2.2.1.2. typeMismatch7.2.2.1.3. patternMismatch7.2.2.1.4. tooLong7.2.2.1.5. rangeUnderflow7.2.2.1.6. rangeOverflow7.2.2.1.7. stepMismatch7.2.2.1.8. customError7.2.2.2. Validation Fields and Functions7.2.2.2.1. The willValidate Attribute7.2.2.2.2. The checkValidity Function7.2.2.2.3. The validationMessage Attribute7.2.3. Validation feedback7.2.3.1. Turning Off Validation7.3. Building an Application with HTML5 Forms7.3.1. Practical Extras7.3.1.1. The Password is: Validation!7.4. Summary
8. Using the HTML5 Web Workers API
8.1. Browser Support for HTML5 Web Workers8.2. Using the HTML5 Web Workers API8.2.1. Checking for Browser Support8.2.2. Creating HTML5 Web Workers8.2.3. Loading and Executing Additional JavaScript8.2.4. Communicating with HTML5 Web Workers8.3. Coding the Main Page8.3.1.8.3.1.1. Coding the HTML5 Web Worker JavaScript File8.3.2. Handling Errors8.3.3. Stopping HTML5 Web Workers8.3.4. Using HTML5 Web Workers within HTML5 Web Workers8.3.5. Using Timers8.3.6. Simple Example Code8.4. Building an Application with HTML5 Web Workers8.4.1. Coding the blur.js Helper Script8.4.2. Coding the blur.html Application Page8.4.3. Coding the blurWorker.js Web Worker Script8.4.4. Communicating with the Web Workers8.4.5. The Application in Action8.4.6. Example Code8.5. Summary
9. Using the HTML5 Web Storage API
9.1. Overview of HTML5 Web Storage9.2. Browser Support for HTML5 Web Storage9.3. Using the HTML5 Web Storage API9.3.1. Checking for Browser Support9.3.2. Setting and Retrieving Values9.3.3. Plugging Data Leaks9.3.4. Local Versus Session Storage9.3.5. Other Web Storage API Attributes and Functions9.3.6. Communicating Web Storage Updates9.3.7. Exploring Web Storage9.4. Building an Application with HTML5 Web Storage9.5. The Future of Browser Database Storage9.6. Practical Extras9.6.1. JSON Object Storage9.6.2. A Window into Sharing9.7. Summary
10. Creating HTML5 Offline Web Applications
10.1. Overview of HTML5 Offline Web Applications10.1.1. Browser Support for HTML5 Offline Web Applications10.2. Using the HTML5 Offline Web Application API10.2.1. Checking for Browser Support10.2.2. Creating a Simple Offline Application10.2.3. Going Offline10.2.4. Manifest Files10.2.5. The applicationCache API10.3. Building an Application with HTML5 Offline Web Applications10.3.1. Creating a Manifest File for the Application Resources10.3.2. Creating the HTML Structure and CSS of the UI10.3.3. Creating the Offline JavaScript10.3.4. Check for ApplicationCache Support10.3.5. Adding the Update Button Handler10.3.6. Add Geolocation Tracking Code10.3.7. Adding Storage Code10.3.8. Adding Offline Event Handling10.4. Summary
11. The Future of HTML5
11.1. Browser Support for HTML511.2. HTML Evolves11.2.1. WebGL11.2.1.1. HTML in Three Dimensions11.2.1.2. 3D Shaders11.2.2. Devices11.2.3. Audio Data API11.2.4. Video Improvements11.2.5. Touchscreen Device Events11.2.5.1. Orientation11.2.5.2. Gestures11.2.5.3. Touches11.2.6. Peer-to-Peer Networking11.2.7. Ultimate Direction11.3. Summary

Content preview from Pro HTML5 Programming: Powerful APIs for Richer Internet Application Development

Chapter 2. Using the HTML5 Canvas API

In this chapter, we'll explore what you can do with the HTML5 Canvas API—a cool API that enables you to dynamically generate and render graphics, charts, images, and animation. We'll walk you through using the basics of the rendering API to create a drawing that can scale and adjust to the browser environment. We'll show you how to create dynamic pictures based on user input in a heatmap display. Of course, we'll also alert you to the pitfalls of using HTML5 Canvas and share tricks to overcome them.

This chapter presumes only a minimal amount of graphics expertise, so don't be afraid to jump in and try out one of the most powerful features of HTML.

Overview of HTML5 Canvas

An entire book could be written about ...

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.

Julian F.

Head of Cybersecurity

I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.

Addison B.

Field Engineer

I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.

Amir M.

Data Platform Tech Lead

I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.

Mark W.

Embedded Software Engineer

Publisher Resources

ISBN: 9781430227908Purchase book

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills

Pro HTML5 Programming: Powerful APIs for Richer Internet Application Development

by Peter Lubbers, Brian Albers, Frank Salim

Chapter 2. Using the HTML5 Canvas API

Overview of HTML5 Canvas

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.