book

Foundation HTML5 Canvas

Name: Foundation HTML5 Canvas
Author: Rob Hawkes
ISBN: 9781430232919

by Rob Hawkes

April 2011

Beginner

316 pages

7h 37m

English

Apress

Read now

Unlock full access

Copyright
Credits
About the Author
About the Technical Reviewer
About the Cover Image Designer
Acknowledgments
Preface
Who is this book for?How is this book structured?
1. Introducing HTML5
1.1. A brief history of HTML1.2. Why is HTML5 needed?1.2.1. The itch1.2.2. Scratching the itch1.3. What's new in HTML5?1.3.1. Structural and content elements1.3.1.1. Structure in HTML51.3.1.1.1. The section element1.3.1.1.2. The header element1.3.1.1.3. The hgroup element1.3.1.1.4. The footer element1.3.1.1.5. The nav element1.3.1.1.6. The article element1.3.1.1.7. The aside element1.3.1.2. Content in HTML51.3.1.2.1. The figure element1.3.1.2.2. The figcaption element1.3.1.2.3. The mark element1.3.1.2.4. The time element1.3.2. Forms1.3.2.1. Validation in the browser1.3.2.2. Input types1.3.2.3. Input attributes1.3.3. Media elements1.3.3.1. The audio element1.3.3.2. The video element1.3.3.3. The canvas element1.4. Deconstructing an example HTML5 page1.4.1. Line by line analysis1.5. Misconceptions about HTML51.5.1. The CSS3 misconception1.5.1.1.1.5.1.1.1. Is CSS3 part of HTML5?1.5.2. The Web Fonts misconception1.5.2.1.1.5.2.1.1. Is Web Fonts part of HTML5?1.5.3. The Geolocation misconception1.5.3.1.1.5.3.1.1. Is the Geolocation API part of HTML5?1.5.4. The SVG misconception1.5.4.1.1.5.4.1.1. Is SVG part of HTML5?1.5.5. The Web Storage misconception1.5.5.1.1.5.5.1.1. Is Web Storage part of HTML5?1.5.6. The Web Workers misconception1.5.6.1.1.5.6.1.1. Are Web Workers part of HTML5?1.5.7. The WebSockets misconception1.5.7.1.1.5.7.1.1. Is the WebSocket API part of HTML5?1.6. Summary1.6.1. Further HTML5 resources
2. Foundation JavaScript
2.1. An overview of JavaScript2.2. jQuery2.2.1. What is jQuery?2.2.2. Why are we using it?2.2.3. Isn't this cheating?2.2.4. Does this mean I won't understand pure JavaScript?2.2.5. How do I start using jQuery?2.3. Adding JavaScript to an HTML page2.4. Running JavaScript after the page has loaded2.4.1. The wrong way (the window.onload event)2.4.2. The long way (the DOM)2.4.3. The easy way (the jQuery way)2.5. Variables and data types2.5.1. Variables2.5.1.1. Naming variables2.5.1.2. Declaring variables and assigning values2.5.1.3. Accessing variables2.5.1.4. Arithmetic2.5.2. Data types2.5.2.1. Primitive data types2.5.2.2. Composite data types2.5.2.3. Other data types2.6. Conditional statements2.6.1. If statements2.6.2. Comparison operators2.6.3. Multiple truth checks within an if statement2.6.4. Else and else if statements2.7. Functions2.7.1. Creating functions2.7.2. Calling functions2.8. Objects2.8.1. What are objects?2.8.2. Creating and using objects2.9. Arrays2.9.1. Creating arrays2.9.2. Accessing and modifying arrays2.10. Loops2.11. Timers2.11.1. Setting one-off timers2.11.2. Unsetting one-off timers2.11.3. Setting repeating timers2.11.4. Unsetting repeating timers2.12. The DOM2.12.1. An example HTML web page2.12.2. Accessing the DOM using pure JavaScript2.12.3. Accessing the DOM using jQuery2.12.4. Manipulating the DOM2.13. Summary
3. Learning the Basics of Canvas
3.1. Getting friendly with the canvas element3.1.1. Browser support for canvas3.2. The 2d rendering context3.2.1. The coordinate system3.2.2. Accessing the 2d rendering context3.3. Drawing basic shapes and lines3.3.1. Lines3.3.2. Circles3.4. Style3.4.1. Changing line width3.5. Drawing text3.6. Erasing the canvas3.6.1. The width/height trick3.7. Making canvas fill the browser window3.8. Summary

4. Pushing Canvas Further
4.1. Saving and restoring the drawing state4.1.1. What is the canvas drawing state?4.1.2. Saving the drawing state4.1.3. Restoring the drawing state4.1.4. Saving and restoring multiple drawing states4.2. Transformations4.2.1. Translation4.2.2. Scaling4.2.3. Rotation4.2.4. The transformation matrix4.2.4.1. Manipulating the transformation matrix4.3. Compositing4.3.1. Global alpha4.3.2. Composite operations4.3.2.1. source-over4.3.2.2. destination-over4.3.2.3. source-atop4.3.2.4. destination-atop4.3.2.5. source-in4.3.2.6. destination-in4.3.2.7. source-out4.3.2.8. destination-out4.3.2.9. lighter4.3.2.10. copy4.3.2.11. xor4.4. Shadows4.5. Gradients4.6. Complex paths4.6.1. Bézier curves4.7. Exporting the canvas as an image4.8. Summary
5. Manipulating Images and Video
5.1. Loading an image into canvas5.2. Resizing and cropping images5.2.1. Resizing images5.2.2. Cropping images5.2.3. Shadows5.3. Transforming images5.3.1. Translation5.3.2. Rotation5.3.3. Scaling and flipping5.4. Accessing pixel values5.4.1. Security issues5.5. Creating an image from scratch5.5.1. Randomizing pixels5.5.2. Creating a mosaic effect5.6. Applying basic effects to an image5.6.1. Inverting colors5.6.2. Grayscale5.6.3. Pixelation5.7. Manipulating video5.7.1. Creating the HTML5 video element5.7.2. Accessing the HTML5 video API5.7.3. Setting up the canvas5.8. Summary
6. Making Things Move
6.1. Overview of animating in canvas6.2. Building an animation loop6.2.1. The loop6.2.2. Update. Clear. Draw.6.3. Remembering shapes to be drawn6.3.1. The wrong way6.3.2. The right way6.4. Randomizing shapes6.5. Changing direction6.6. Animating along a circle6.6.1. Trigonometry6.6.2. Putting everything together6.7. Bouncing objects off a boundary6.8. Summary
7. Implementing Advanced Animation
7.1. Introduction to physics7.1.1. What is physics?7.1.2. Why is physics useful for animation?7.1.3. Some basics terms7.1.3.1. Force7.1.3.2. Vector7.1.3.3. Mass7.1.3.4. Weight7.1.3.5. Friction7.1.3.6. Velocity7.1.3.7. Speed7.1.3.8. Acceleration7.1.4. Newton's laws of motion7.1.4.1. First law7.1.4.2. Second law7.1.4.3. Third law7.2. Animating with physics7.2.1. Getting everything ready7.2.2. Velocity7.2.3. Adding a boundary7.2.4. Acceleration7.2.5. Friction7.3. Collision detection7.3.1. Collision detection7.3.2. Bouncing objects away from each other7.3.3. Conservation of momentum7.4. Summary
8. Creating the Space Bowling Game
8.1. Overview of the game8.1.1. Requirements8.2. Setting up the core functionality8.2.1. Marking up the HTML8.2.2. Making things pretty8.2.3. Setting up the JavaScript8.3. Activating the user interface8.4. Creating the game objects8.4.1. Creating the platform8.4.2. Setting up the asteroids8.4.3. Setting up the player asteroid8.4.4. Updating the UI8.5. Making things move8.6. Detecting user interaction8.6.1. Setting everything up8.6.2. Selecting the player asteroid8.6.3. Increasing the power8.6.4. Letting go8.6.5. Visualizing the user input8.7. Resetting the player8.8. Letting the player win8.8.1. Updating the score8.8.2. Removing asteroids from the platform8.9. Summary
9. Creating the Asteroid Avoidance Game
9.1. Overview of the game9.1.1. Requirements9.2. Setting up the core functionality9.2.1. Marking up the HTML9.2.2. Making things pretty9.2.3. Setting up the JavaScript9.3. Creating the game objects9.3.1. Setting up the asteroids9.3.2. Setting up the player rocket9.4. Detecting keyboard input9.4.1. Key codes9.4.2. Keyboard events9.5. Making things move9.6. Faking the side-scrolling effect9.6.1. Recycling the asteroids9.6.2. Adding boundaries9.6.3. Giving the player constant movement9.7. Adding sound9.8. Ending the game9.8.1. Scoring9.8.2. Killing the player9.9. Increasing the difficulty9.10. Summary
10. Taking Things Further and the Future of Canvas
10.1. Canvas and SVG10.1.1. Accessibility10.1.2. Bitmap vs. vector10.2. Canvas and Flash10.2.1. JavaScript developers can learn from Flash10.2.2. Canvas doesn't have a user-friendly editor like Flash10.3. Canvas and performance10.3.1. Testing for performance10.4. Canvas gaming and animation libraries10.5. Going into the third dimension10.6. Integration with peripheral devices10.6.1. Project Rainbow10.7. Multiplayer with WebSockets10.8. Inspiration10.8.1. Sketch Out10.8.2. Z-Type10.8.3. Sinuous10.9. Summary, and farewell

Overview

Foundation HTML5 Canvas: For Games and Entertainment teaches you how to make exciting interactive games and applications using HTML5 canvas.

Canvas lets you produce graphics, animations, and applications using the HTML5 and JavaScript web standards. It allows you to draw directly within the browser without the need for third-party plugins like Adobe Flash, and so canvas works perfectly across desktop and mobile devices, like the iPhone and Android.

Foundation HTML5 Canvas begins by introducing you to HTML5 and the cool new features that it opens up for you. You are then offered a quick guide to JavaScript programming to get you up to speed. Next up you'll receive a thorough introduction to the canvas element, which teaches you how to draw objects within the browser with great ease.

Once the basics are covered you'll move on to the more advanced features of canvas, including image and video manipulation. You'll also learn how to create realistic animations with the help of some basic physics.

Foundation HTML5 Canvas then teaches you how to create two thrilling space-based games using all the skills you've learned so far. You'll find plenty of code examples and illustrations designed to help you understand even the most complex of topics.

HTML5 is already here for you, and Foundation HTML5 Canvas will provide you with all the information you need to enjoy the show.

What you'll learn

The exciting new features that HTML5 brings and how to use them
The basics of programming in JavaScript and capturing user input
What the canvas drawing element is all about and why you'd want to use it
How to utilize both basic and advanced features of canvas
How to create realistic animations using canvas and a splash of physics
How to make interactive games using canvas, JavaScript, and other HTML5 goodies

Who this book is for

The book has been written in a friendly way that makes it approachable to beginners and experts alike. It is predominantly for Web designers who are new to HTML5 and JavaScript, and covers the absolute basics of creating interactive games and applications using the HTML5 canvas element. Experienced Web designers and programmers will also learn about all the features of canvas and how they can be used within their own projects. Flash and Silverlight developers wanting to broaden their reach across the Web and mobile devices will also benefit from the information in this book.

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: 9781430232919Purchase book

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills