html5 canvas for dummies

HTML5 Canvas

FOR

DUMmIES‰

by Don Cowan

HTML5 Canvas

FOR

DUMmIES‰

HTML5 Canvas For Dummies®

Published by

John Wiley & Sons, Inc.

111 River Street

Hoboken, NJ 07030-5774

www.wiley.com

Copyright © 2013 by John Wiley & Sons, Inc., Hoboken, New Jersey

Published by John Wiley & Sons, Inc., Hoboken, New Jersey

Published simultaneously in Canada

No part of this publication may be reproduced, stored in a retrieval system or transmitted in any form or

by any means, electronic, mechanical, photocopying, recording, scanning or otherwise, except as permit￾ted under Sections 107 or 108 of the 1976 United States Copyright Act, without either the prior written

permission of the Publisher, or authorization through payment of the appropriate per-copy fee to the

Copyright Clearance Center, 222 Rosewood Drive, Danvers, MA 01923, (978) 750-8400, fax (978) 646-8600.

Requests to the Publisher for permission should be addressed to the Permissions Department, John Wiley

& Sons, Inc., 111 River Street, Hoboken, NJ 07030, (201) 748-6011, fax (201) 748-6008, or online at http://

www.wiley.com/go/permissions.

Trademarks: Wiley, the Wiley logo, For Dummies, the Dummies Man logo, A Reference for the Rest of Us!,

The Dummies Way, Dummies Daily, The Fun and Easy Way, Dummies.com, Making Everything Easier, and

related trade dress are trademarks or registered trademarks of John Wiley & Sons, Inc. and/or its affili￾ates in the United States and other countries, and may not be used without written permission. All other

trademarks are the property of their respective owners. John Wiley & Sons, Inc. is not associated with any

product or vendor mentioned in this book.

LIMIT OF LIABILITY/DISCLAIMER OF WARRANTY: THE PUBLISHER AND THE AUTHOR MAKE NO REP￾RESENTATIONS OR WARRANTIES WITH RESPECT TO THE ACCURACY OR COMPLETENESS OF THE

CONTENTS OF THIS WORK AND SPECIFICALLY DISCLAIM ALL WARRANTIES, INCLUDING WITHOUT LIMI￾TATION WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE. NO WARRANTY MAY BE CREATED

OR EXTENDED BY SALES OR PROMOTIONAL MATERIALS. THE ADVICE AND STRATEGIES CONTAINED

HEREIN MAY NOT BE SUITABLE FOR EVERY SITUATION. THIS WORK IS SOLD WITH THE UNDERSTAND￾ING THAT THE PUBLISHER IS NOT ENGAGED IN RENDERING LEGAL, ACCOUNTING, OR OTHER PRO￾FESSIONAL SERVICES. IF PROFESSIONAL ASSISTANCE IS REQUIRED, THE SERVICES OF A COMPETENT

PROFESSIONAL PERSON SHOULD BE SOUGHT. NEITHER THE PUBLISHER NOR THE AUTHOR SHALL

BE LIABLE FOR DAMAGES ARISING HEREFROM. THE FACT THAT AN ORGANIZATION OR WEBSITE IS

REFERRED TO IN THIS WORK AS A CITATION AND/OR A POTENTIAL SOURCE OF FURTHER INFORMA￾TION DOES NOT MEAN THAT THE AUTHOR OR THE PUBLISHER ENDORSES THE INFORMATION THE

ORGANIZATION OR WEBSITE MAY PROVIDE OR RECOMMENDATIONS IT MAY MAKE. FURTHER, READ￾ERS SHOULD BE AWARE THAT INTERNET WEBSITES LISTED IN THIS WORK MAY HAVE CHANGED OR

DISAPPEARED BETWEEN WHEN THIS WORK WAS WRITTEN AND WHEN IT IS READ.

For general information on our other products and services, please contact our Customer Care

Department within the U.S. at 877-762-2974, outside the U.S. at 317-572-3993, or fax 317-572-4002.

For technical support, please visit www.wiley.com/techsupport.

Wiley publishes in a variety of print and electronic formats and by print-on-demand. Some material

included with standard print versions of this book may not be included in e-books or in print-on-demand.

If this book refers to media such as a CD or DVD that is not included in the version you purchased, you

may download this material at http://booksupport.wiley.com. For more information about Wiley

products, visit www.wiley.com.

Library of Congress Control Number is available from the publisher.

ISBN 978-1-118-38535-7 (pbk); ISBN 978-1-118-41747-8 (ebk); ISBN 978-1-118-42082-9 (ebk);

978-1-118-45964-5 (ebk)

Manufactured in the United States of America

10 9 8 7 6 5 4 3 2 1

About the Author

Don Cowan is a software designer, developer, and author with a history of

pioneering work in a number of computing and mobile technologies, includ￾ing programming languages, database systems, software architecture, graph￾ics, and user interface.  He’s currently focused on developing software and

writing books on the latest mobile and web platforms including Android,

HTML5, and graphics capabilities such as HTML5 Canvas.  As a developer

and project manager at AT&T, Don worked on software and telecommunica￾tions systems all over the world including Brazil, the Netherlands, Germany,

Japan, and South Africa.

Don also has a fine arts and graphics background. His paintings, etchings,

and prints have sold around the world.

Don is a founding member of marketimpacts.com and is currently its

Director of Software Engineering. He earned his Bachelor’s degree in

Mathematics from Northwestern University and Master’s degree in Computer

Science from the University of Illinois.

Follow Don on Twitter (@donkcowan) or read his blog at www.donkcowan.

com/blog.

Dedication

To my daughter, Alana, and son, David, for their encouragement, support,

and understanding. I love you both.

To my life partner, Christie Harrison, for her help and patience during the

many months of my focus on this book. You’re the best and I love you.

To our dog, Daisy. On top of her usual duties as our best friend, she performed

beautifully as model and actress for two book chapters. And I love you, too.

To the Wiley team of editors for their patience and skill. Our collaboration

was a high point in my life.

Author’s Acknowledgments

Thanks to my agent, Carole Jelen, for discovering this opportunity and believ￾ing in me. You’re a true professional.

Thanks to Wiley Acquisitions Editor Katie Feltman for giving me the chance

to take on this exciting project. You were a huge help throughout the devel￾opment and writing process.

Thanks to Wiley Senior Project Editor Kim Darosett, who is at the center of the

action and makes sense of it all. Without you, I would have been lost in the woods.

Thanks to Wiley Copy Editor Debbye Butler who has managed to make a tech

guy look like a polished author. Magic.

Thanks to Wiley Technical Editor Kelly Francis who has the eagle eyes to

spot my errors and suggest just the right improvements. You’re the best.

Thanks to Wiley Project Coordinator Patrick Redmond. All the pieces came

together smoothly. You did a great job.

Thanks to Jack Fuller, a successful author and friend who took the time to

lend his support and share his expertise. You’re my author hero.

Thanks to Wayne Smith, a fellow techie and friend who gave just the right advice.

Thanks to David Highland, a friend and very smart guy who gave the right

help at the right times.

And finally, thanks to all the relatives and friends who encouraged and supported

me. You gave me hope during all those hours hunched over my keyboard.

Publisher’s Acknowledgments

We’re proud of this book; please send us your comments at http://dummies.custhelp.com.

For other comments, please contact our Customer Care Department within the U.S. at 877-762-2974,

outside the U.S. at 317-572-3993, or fax 317-572-4002.

Some of the people who helped bring this book to market include the following:

Acquisitions and Editorial

Senior Project Editor: Kim Darosett

Senior Acquisitions Editor: Katie Feltman

Copy Editor: Debbye Butler

Technical Editor: McClellan C. Francis

Editorial Manager: Leah Michael

Editorial Assistant: Leslie Saxman

Sr. Editorial Assistant: Cherie Case

Cover Photo: © merrymoonmary / iStockphoto

Cartoons: Rich Tennant (www.the5thwave.com)

Composition Services

Project Coordinator: Patrick Redmond

Layout and Graphics: Carl Byers,

Jennifer Creasey, Joyce Haughey

Proofreader: Sossity R. Smith

Indexer: Infodex Indexing Services, Inc.

Special Help

Rebecca Whitney

Publishing and Editorial for Technology Dummies

Richard Swadley, Vice President and Executive Group Publisher

Andy Cummings, Vice President and Publisher

Mary Bednarek, Executive Acquisitions Director

Mary C. Corder, Editorial Director

Publishing for Consumer Dummies

Kathleen Nebenhaus, Vice President and Executive Publisher

Composition Services

Debbie Stailey, Director of Composition Services

Contents at a Glance

Introduction ................................................................ 1

Part I: Looking at Canvas............................................. 5

Chapter 1: A Quick Glimpse Behind the Canvas............................................................7

Chapter 2: Setting Up Your Canvas Platform...............................................................21

Part II: Drawing on Canvas ........................................ 39

Chapter 3: Creating Objects ...........................................................................................41

Chapter 4: Enhancing Objects........................................................................................81

Chapter 5: Transforming Objects ................................................................................115

Chapter 6: Moving Objects ...........................................................................................135

Part III: Breathing Life into Your Canvas................... 169

Chapter 7: Mastering the Art of Canvas......................................................................171

Chapter 8: Introducing User Interaction.....................................................................193

Chapter 9: Creating Engaging Imagery and Motion...................................................217

Chapter 10: Sounding Off with Audio..........................................................................249

Part IV: Developing More Complex Applications ......... 273

Chapter 11: Grabbing Attention with Video...............................................................275

Chapter 12: Enhancing Canvas Applications..............................................................301

Part V: The Part of Tens ........................................... 333

Chapter 13: Ten Great Canvas Applications...............................................................335

Chapter 14: Ten Great Tools ........................................................................................339

Index ...................................................................... 343

Table of Contents

Introduction ................................................................. 1

About This Book ..............................................................................................1

Foolish Assumptions.......................................................................................2

Conventions Used in This Book.....................................................................2

How This Book Is Organized..........................................................................3

Part I: Looking at Canvas ......................................................................3

Part II: Drawing on Canvas....................................................................3

Part III: Breathing Life into Your Canvas.............................................3

Part IV: Developing More Complex Applications...............................3

Part V: The Part of Tens........................................................................3

Bonus Chapter: Gaming with Canvas ..................................................3

eCheat Sheet...........................................................................................3

Icons Used in This Book .................................................................................4

Where to Go From Here..................................................................................4

Part I: Looking at Canvas.............................................. 5

Chapter 1: A Quick Glimpse Behind the Canvas . . . . . . . . . . . . . . . . . . . 7

Displaying Your Canvas on the Stage of the World Wide Web..................7

Client devices .........................................................................................9

Remote devices....................................................................................15

Seeing a Canvas Application in Action .......................................................16

Using your browser to display a sample Canvas.............................16

Using the sample code ........................................................................17

Chapter 2: Setting Up Your Canvas Platform . . . . . . . . . . . . . . . . . . . . . 21

Testing Canvas Performance on Your System...........................................21

Tuning Your Display......................................................................................23

Understanding pixels...........................................................................24

Adjusting your display ........................................................................25

Turning on browser GPU hardware acceleration............................27

Testing Your Application on Mobile Devices ............................................28

Measuring Web Browser Support for HTML5 Canvas ..............................29

Examining HTML5 Canvas support ...................................................29

Testing the browsers you use............................................................30