html5 canvas for dummies

www.it-ebooks.info www.it-ebooks.info HTML5 Canvas FOR DUMmIES ‰ www.it-ebooks.info www.it-ebooks.info by Don Cowan HTML5 Canvas FOR DUMmIES ‰ www.it-ebooks.info 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 afli- 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 www.it-ebooks.info 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 ne 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. www.it-ebooks.info www.it-ebooks.info 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. www.it-ebooks.info www.it-ebooks.info [...]... padding:5px;”> CANVAS area definition > canvas > Your browser doesn’t currently support HTML5 Canvas Please check www.caniuse.com/#feat =canvas for information on browser support for canvas < /canvas> www.it-ebooks.info 11 12 Part I: Looking at Canvas Here... thousand words Figure 1-1 shows how all the HTML5 Canvas pieces fit together Figure 1-1: HTML5 Canvas on the World Wide Web www.it-ebooks.info Chapter 1: A Quick Glimpse Behind the Canvas Five great things about HTML5 Canvas Canvas is a much anticipated feature of HTML5 Here are just a few of the great things about it: ✓ It’s interactive HTML5 Canvas can listen for and respond to user actions Moving a... Application on Mobile Devices 28 Measuring Web Browser Support for HTML5 Canvas 29 Examining HTML5 Canvas support 29 Testing the browsers you use 30 www.it-ebooks.info xiv HTML5 Canvas For Dummies Using Text Editors 31 Standard text editors 31 Alternatives to standard text editors 32 Saving HTML5 Canvas application files 34 Using Code Debuggers ... find online at www .dummies. com/cheatsheet/ html 5canvas The eCheat Sheet lists Canvas functions and parameters in an easy to use format www.it-ebooks.info 3 4 HTML5 Canvas For Dummies Icons Used in This Book This icon indicates a helpful pointer you probably don’t want to skip This icon represents something to keep in mind as you develop your Canvas applications This icon indicates information that’s... same monospace font, for example: www.mozilla.org/firefox www.it-ebooks.info Introduction How This Book Is Organized HTML5 Canvas For Dummies is divided into five parts, which I describe in the following sections Part I: Looking at Canvas Part I introduces Canvas, gives you a glimpse at how it works, and explains how to set up your Canvas development platform Part II: Drawing on Canvas Part II introduces... Breathing Life into Your Canvas 169 Chapter 7: Mastering the Art of Canvas 171 Creating Appealing Canvas Spaces 171 Choosing the size and proportions of your Canvas 172 Resizing and rescaling your Canvas 172 Dividing your Canvas with the rule of thirds 176 Using the golden ratio in your design 177 www.it-ebooks.info xv xvi HTML5 Canvas For Dummies Creating... If this book does have technical updates, they will be posted at www .dummies. com/go/ html5canvasupdates www.it-ebooks.info Part I Looking at Canvas www.it-ebooks.info P In this part art I introduces you to HTML5 Canvas and the development platform to assemble as a base for creating your applications I take a quick look behind Canvas to show you how the major pieces fit together and how it all works... global exposure given to an HTML5 Canvas application www.it-ebooks.info 8 Part I: Looking at Canvas Your Canvas application will sit within the framework of the Internet and World Wide Web It will have instant and automatic distribution Get a little buzz going and it could be seen by millions So what exactly is HTML5 Canvas? Well, stated briefly, HTML5 Canvas is a standard for applications written in... Part V: The Part of Tens Part V lists ten great HTML5 Canvas applications/websites and ten great Canvas development tools Bonus Chapter: Gaming with Canvas If you’re interested in finding out more about gaming, check out the “Gaming with Canvas bonus chapter available as a PDF at www .dummies. com/go/ html 5canvas This chapter shows you how to develop a Canvas arcade game eCheat Sheet To give you a quick... imaginations The HTML5 Canvas standard is gaining wide acceptance and implementation in the major browsers This means that work you put into developing Canvas applications will produce results for many years or decades to come About This Book HTML5 Canvas For Dummies is a beginner’s guide to developing browserbased graphics applications You don’t need prior experience in computer graphics Canvas application . www.it-ebooks.info www.it-ebooks.info HTML5 Canvas FOR DUMmIES ‰ www.it-ebooks.info www.it-ebooks.info by Don Cowan HTML5 Canvas FOR DUMmIES ‰ www.it-ebooks.info HTML5 Canvas For Dummies ® Published by. 28 Measuring Web Browser Support for HTML5 Canvas 29 Examining HTML5 Canvas support 29 Testing the browsers you use 30 www.it-ebooks.info xiv HTML5 Canvas For Dummies Using Text Editors 31 Standard. 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,