Foundation HTML5 Canvas

Foundation HTML5 Canvas

Released April 2011
Publisher(s): Apress
ISBN: 9781430232919

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

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.

Table of contents

  1. Copyright
  2. Credits
  3. About the Author
  4. About the Technical Reviewer
  5. About the Cover Image Designer
  6. Acknowledgments
  7. Preface
    1. Who is this book for?
    2. How is this book structured?
  8. 1. Introducing HTML5
    1. 1.1. A brief history of HTML
    2. 1.2. Why is HTML5 needed?
      1. 1.2.1. The itch
      2. 1.2.2. Scratching the itch
    3. 1.3. What's new in HTML5?
      1. 1.3.1. Structural and content elements
        1. 1.3.1.1. Structure in HTML5
          1. 1.3.1.1.1. The section element
          2. 1.3.1.1.2. The header element
          3. 1.3.1.1.3. The hgroup element
          4. 1.3.1.1.4. The footer element
          5. 1.3.1.1.5. The nav element
          6. 1.3.1.1.6. The article element
          7. 1.3.1.1.7. The aside element
        2. 1.3.1.2. Content in HTML5
          1. 1.3.1.2.1. The figure element
          2. 1.3.1.2.2. The figcaption element
          3. 1.3.1.2.3. The mark element
          4. 1.3.1.2.4. The time element
      2. 1.3.2. Forms
        1. 1.3.2.1. Validation in the browser
        2. 1.3.2.2. Input types
        3. 1.3.2.3. Input attributes
      3. 1.3.3. Media elements
        1. 1.3.3.1. The audio element
        2. 1.3.3.2. The video element
        3. 1.3.3.3. The canvas element
    4. 1.4. Deconstructing an example HTML5 page
      1. 1.4.1. Line by line analysis
    5. 1.5. Misconceptions about HTML5
      1. 1.5.1. The CSS3 misconception
        1. 1.5.1.1.
          1. 1.5.1.1.1. Is CSS3 part of HTML5?
      2. 1.5.2. The Web Fonts misconception
        1. 1.5.2.1.
          1. 1.5.2.1.1. Is Web Fonts part of HTML5?
      3. 1.5.3. The Geolocation misconception
        1. 1.5.3.1.
          1. 1.5.3.1.1. Is the Geolocation API part of HTML5?
      4. 1.5.4. The SVG misconception
        1. 1.5.4.1.
          1. 1.5.4.1.1. Is SVG part of HTML5?
      5. 1.5.5. The Web Storage misconception
        1. 1.5.5.1.
          1. 1.5.5.1.1. Is Web Storage part of HTML5?
      6. 1.5.6. The Web Workers misconception
        1. 1.5.6.1.
          1. 1.5.6.1.1. Are Web Workers part of HTML5?
      7. 1.5.7. The WebSockets misconception
        1. 1.5.7.1.
          1. 1.5.7.1.1. Is the WebSocket API part of HTML5?
    6. 1.6. Summary
      1. 1.6.1. Further HTML5 resources
  9. 2. Foundation JavaScript
    1. 2.1. An overview of JavaScript
    2. 2.2. jQuery
      1. 2.2.1. What is jQuery?
      2. 2.2.2. Why are we using it?
      3. 2.2.3. Isn't this cheating?
      4. 2.2.4. Does this mean I won't understand pure JavaScript?
      5. 2.2.5. How do I start using jQuery?
    3. 2.3. Adding JavaScript to an HTML page
    4. 2.4. Running JavaScript after the page has loaded
      1. 2.4.1. The wrong way (the window.onload event)
      2. 2.4.2. The long way (the DOM)
      3. 2.4.3. The easy way (the jQuery way)
    5. 2.5. Variables and data types
      1. 2.5.1. Variables
        1. 2.5.1.1. Naming variables
        2. 2.5.1.2. Declaring variables and assigning values
        3. 2.5.1.3. Accessing variables
        4. 2.5.1.4. Arithmetic
      2. 2.5.2. Data types
        1. 2.5.2.1. Primitive data types
        2. 2.5.2.2. Composite data types
        3. 2.5.2.3. Other data types
    6. 2.6. Conditional statements
      1. 2.6.1. If statements
      2. 2.6.2. Comparison operators
      3. 2.6.3. Multiple truth checks within an if statement
      4. 2.6.4. Else and else if statements
    7. 2.7. Functions
      1. 2.7.1. Creating functions
      2. 2.7.2. Calling functions
    8. 2.8. Objects
      1. 2.8.1. What are objects?
      2. 2.8.2. Creating and using objects
    9. 2.9. Arrays
      1. 2.9.1. Creating arrays
      2. 2.9.2. Accessing and modifying arrays
    10. 2.10. Loops
    11. 2.11. Timers
      1. 2.11.1. Setting one-off timers
      2. 2.11.2. Unsetting one-off timers
      3. 2.11.3. Setting repeating timers
      4. 2.11.4. Unsetting repeating timers
    12. 2.12. The DOM
      1. 2.12.1. An example HTML web page
      2. 2.12.2. Accessing the DOM using pure JavaScript
      3. 2.12.3. Accessing the DOM using jQuery
      4. 2.12.4. Manipulating the DOM
    13. 2.13. Summary
  10. 3. Learning the Basics of Canvas
    1. 3.1. Getting friendly with the canvas element
      1. 3.1.1. Browser support for canvas
    2. 3.2. The 2d rendering context
      1. 3.2.1. The coordinate system
      2. 3.2.2. Accessing the 2d rendering context
    3. 3.3. Drawing basic shapes and lines
      1. 3.3.1. Lines
      2. 3.3.2. Circles
    4. 3.4. Style
      1. 3.4.1. Changing line width
    5. 3.5. Drawing text
    6. 3.6. Erasing the canvas
      1. 3.6.1. The width/height trick
    7. 3.7. Making canvas fill the browser window
    8. 3.8. Summary
  11. 4. Pushing Canvas Further
    1. 4.1. Saving and restoring the drawing state
      1. 4.1.1. What is the canvas drawing state?
      2. 4.1.2. Saving the drawing state
      3. 4.1.3. Restoring the drawing state
      4. 4.1.4. Saving and restoring multiple drawing states
    2. 4.2. Transformations
      1. 4.2.1. Translation
      2. 4.2.2. Scaling
      3. 4.2.3. Rotation
      4. 4.2.4. The transformation matrix
        1. 4.2.4.1. Manipulating the transformation matrix
    3. 4.3. Compositing
      1. 4.3.1. Global alpha
      2. 4.3.2. Composite operations
        1. 4.3.2.1. source-over
        2. 4.3.2.2. destination-over
        3. 4.3.2.3. source-atop
        4. 4.3.2.4. destination-atop
        5. 4.3.2.5. source-in
        6. 4.3.2.6. destination-in
        7. 4.3.2.7. source-out
        8. 4.3.2.8. destination-out
        9. 4.3.2.9. lighter
        10. 4.3.2.10. copy
        11. 4.3.2.11. xor
    4. 4.4. Shadows
    5. 4.5. Gradients
    6. 4.6. Complex paths
      1. 4.6.1. Bézier curves
    7. 4.7. Exporting the canvas as an image
    8. 4.8. Summary
  12. 5. Manipulating Images and Video
    1. 5.1. Loading an image into canvas
    2. 5.2. Resizing and cropping images
      1. 5.2.1. Resizing images
      2. 5.2.2. Cropping images
      3. 5.2.3. Shadows
    3. 5.3. Transforming images
      1. 5.3.1. Translation
      2. 5.3.2. Rotation
      3. 5.3.3. Scaling and flipping
    4. 5.4. Accessing pixel values
      1. 5.4.1. Security issues
    5. 5.5. Creating an image from scratch
      1. 5.5.1. Randomizing pixels
      2. 5.5.2. Creating a mosaic effect
    6. 5.6. Applying basic effects to an image
      1. 5.6.1. Inverting colors
      2. 5.6.2. Grayscale
      3. 5.6.3. Pixelation
    7. 5.7. Manipulating video
      1. 5.7.1. Creating the HTML5 video element
      2. 5.7.2. Accessing the HTML5 video API
      3. 5.7.3. Setting up the canvas
    8. 5.8. Summary
  13. 6. Making Things Move
    1. 6.1. Overview of animating in canvas
    2. 6.2. Building an animation loop
      1. 6.2.1. The loop
      2. 6.2.2. Update. Clear. Draw.
    3. 6.3. Remembering shapes to be drawn
      1. 6.3.1. The wrong way
      2. 6.3.2. The right way
    4. 6.4. Randomizing shapes
    5. 6.5. Changing direction
    6. 6.6. Animating along a circle
      1. 6.6.1. Trigonometry
      2. 6.6.2. Putting everything together
    7. 6.7. Bouncing objects off a boundary
    8. 6.8. Summary
  14. 7. Implementing Advanced Animation
    1. 7.1. Introduction to physics
      1. 7.1.1. What is physics?
      2. 7.1.2. Why is physics useful for animation?
      3. 7.1.3. Some basics terms
        1. 7.1.3.1. Force
        2. 7.1.3.2. Vector
        3. 7.1.3.3. Mass
        4. 7.1.3.4. Weight
        5. 7.1.3.5. Friction
        6. 7.1.3.6. Velocity
        7. 7.1.3.7. Speed
        8. 7.1.3.8. Acceleration
      4. 7.1.4. Newton's laws of motion
        1. 7.1.4.1. First law
        2. 7.1.4.2. Second law
        3. 7.1.4.3. Third law
    2. 7.2. Animating with physics
      1. 7.2.1. Getting everything ready
      2. 7.2.2. Velocity
      3. 7.2.3. Adding a boundary
      4. 7.2.4. Acceleration
      5. 7.2.5. Friction
    3. 7.3. Collision detection
      1. 7.3.1. Collision detection
      2. 7.3.2. Bouncing objects away from each other
      3. 7.3.3. Conservation of momentum
    4. 7.4. Summary
  15. 8. Creating the Space Bowling Game
    1. 8.1. Overview of the game
      1. 8.1.1. Requirements
    2. 8.2. Setting up the core functionality
      1. 8.2.1. Marking up the HTML
      2. 8.2.2. Making things pretty
      3. 8.2.3. Setting up the JavaScript
    3. 8.3. Activating the user interface
    4. 8.4. Creating the game objects
      1. 8.4.1. Creating the platform
      2. 8.4.2. Setting up the asteroids
      3. 8.4.3. Setting up the player asteroid
      4. 8.4.4. Updating the UI
    5. 8.5. Making things move
    6. 8.6. Detecting user interaction
      1. 8.6.1. Setting everything up
      2. 8.6.2. Selecting the player asteroid
      3. 8.6.3. Increasing the power
      4. 8.6.4. Letting go
      5. 8.6.5. Visualizing the user input
    7. 8.7. Resetting the player
    8. 8.8. Letting the player win
      1. 8.8.1. Updating the score
      2. 8.8.2. Removing asteroids from the platform
    9. 8.9. Summary
  16. 9. Creating the Asteroid Avoidance Game
    1. 9.1. Overview of the game
      1. 9.1.1. Requirements
    2. 9.2. Setting up the core functionality
      1. 9.2.1. Marking up the HTML
      2. 9.2.2. Making things pretty
      3. 9.2.3. Setting up the JavaScript
    3. 9.3. Creating the game objects
      1. 9.3.1. Setting up the asteroids
      2. 9.3.2. Setting up the player rocket
    4. 9.4. Detecting keyboard input
      1. 9.4.1. Key codes
      2. 9.4.2. Keyboard events
    5. 9.5. Making things move
    6. 9.6. Faking the side-scrolling effect
      1. 9.6.1. Recycling the asteroids
      2. 9.6.2. Adding boundaries
      3. 9.6.3. Giving the player constant movement
    7. 9.7. Adding sound
    8. 9.8. Ending the game
      1. 9.8.1. Scoring
      2. 9.8.2. Killing the player
    9. 9.9. Increasing the difficulty
    10. 9.10. Summary
  17. 10. Taking Things Further and the Future of Canvas
    1. 10.1. Canvas and SVG
      1. 10.1.1. Accessibility
      2. 10.1.2. Bitmap vs. vector
    2. 10.2. Canvas and Flash
      1. 10.2.1. JavaScript developers can learn from Flash
      2. 10.2.2. Canvas doesn't have a user-friendly editor like Flash
    3. 10.3. Canvas and performance
      1. 10.3.1. Testing for performance
    4. 10.4. Canvas gaming and animation libraries
    5. 10.5. Going into the third dimension
    6. 10.6. Integration with peripheral devices
      1. 10.6.1. Project Rainbow
    7. 10.7. Multiplayer with WebSockets
    8. 10.8. Inspiration
      1. 10.8.1. Sketch Out
      2. 10.8.2. Z-Type
      3. 10.8.3. Sinuous
    9. 10.9. Summary, and farewell

Product information

  • Title: Foundation HTML5 Canvas
  • Author(s):
  • Release date: April 2011
  • Publisher(s): Apress
  • ISBN: 9781430232919