Core HTML5 Canvas

Core HTML5 Canvas

This page intentionally left blank

Core HTML5 CanvasGraphics, Animation, and GameDevelopmentDavid GearyUpper Saddle River, NJ Boston Indianapolis San FranciscoNew York Toronto Montreal London Munich Paris MadridCapetown Sydney Tokyo Singapore Mexico City

Many of the designations used by manufacturers and sellers to distinguish their products are claimedas trademarks. Where those designations appear in this book, and the publisher was aware of a trademarkclaim, the designations have been printed with initial capital letters or in all capitals.The author and publisher have taken care in the preparation of this book, but make no expressed orimplied warranty of any kind and assume no responsibility for errors or omissions. No liability isassumed for incidental or consequential damages in connection with or arising out of the use of theinformation or programs contained herein.The publisher offers excellent discounts on this book when ordered in quantity for bulk purchases orspecial sales, which may include electronic versions and/or custom covers and content particular toyour business, training goals, marketing focus, and branding interests. For more information, pleasecontact:U.S. Corporate and Government Sales(800) 382–3419corpsales@pearsontechgroup.comFor sales outside the United States, please contact:International Salesinternational@pearson.comVisit us on the Web: informit.com/phLibrary of Congress Cataloging-in-Publication DataGeary, David M.Core HTML5 canvas : graphics, animation, and game development / DavidGeary.p. cm.Includes index.ISBN 978-0-13-276161-1 (pbk. : alk. paper)1. HTML (Document markup language) 2. Computer games—Programming. 3.Computer animation. I. Title.QA76.76.H94C66 2012006.6'6—dc232012006871Copyright 2012 David GearyAll rights reserved. Printed in the United States of America. This publication is protected by copyright,and permission must be obtained from the publisher prior to any prohibited reproduction, storage in aretrieval system, or transmission in any form or by any means, electronic, mechanical, photocopying,recording, or likewise. To obtain permission to use material from this work, please submit a writtenrequest to Pearson Education, Inc., Permissions Department, One Lake Street, Upper Saddle River, NewJersey 07458, or you may fax your request to (201) 236-3290.ISBN-13: 978-0-13-276161-1ISBN-10:0-13-276161-0Text printed in the United States on recycled paper at RR Donnelley in Crawfordsville, Indiana.First printing, May 2012

ContentsPreface . xvAcknowledgments . xxiiiAbout the Author . xxvChapter 1: Essentials . 11.11.21.31.41.51.61.71.8The canvas Element . 11.1.1 Canvas Element Size vs. Drawing Surface Size . 51.1.2 The Canvas API . 7Canvas Contexts . 81.2.1 The 2d Context . 91.2.1.1 The WebGL 3d Context . 111.2.2 Saving and Restoring Canvas State . 11Canonical Examples in This Book . 12Getting Started . 141.4.1 Specifications . 141.4.2 Browsers . 151.4.3 Consoles and Debuggers . 161.4.4 Performance . 181.4.4.1 Profiles and Timelines . 191.4.4.2 jsPerf . 20Fundamental Drawing Operations . 22Event Handling . 261.6.1 Mouse Events . 261.6.1.1 Translating Mouse Coordinates to CanvasCoordinates . 261.6.2 Keyboard Events . 311.6.3 Touch Events . 33Saving and Restoring the Drawing Surface . 33Using HTML Elements in a Canvas . 361.8.1 Invisible HTML Elements . 41v

viContents1.9 Printing a Canvas .1.10 Offscreen Canvases .1.11 A Brief Math Primer .1.11.1 Solving Algebraic Equations .1.11.2 Trigonometry .1.11.2.1 Angles: Degrees and Radians .1.11.2.2 Sine, Cosine, and Tangent .1.11.3 Vectors .1.11.3.1 Vector Magnitude .1.11.3.2 Unit Vectors .1.11.3.3 Adding and Subtracting Vectors .1.11.3.4 The Dot Product of Two Vectors .1.11.4 Deriving Equations from Units of Measure .1.12 Conclusion .4651535454545556575859606264Chapter 2: Drawing . 652.12.22.32.42.52.62.72.8The Coordinate System . 67The Drawing Model . 68Drawing Rectangles . 70Colors and Transparency . 72Gradients and Patterns . 762.5.1 Gradients . 762.5.1.1 Linear Gradients . 762.5.1.2 Radial Gradients . 782.5.2 Patterns . 79Shadows . 832.6.1 Inset Shadows . 85Paths, Stroking, and Filling . 882.7.1 Paths and Subpaths . 932.7.1.1 The Nonzero Winding Rule for Filling Paths . 942.7.2 Cutouts . 952.7.2.1 Cutout Shapes . 98Lines . 1032.8.1 Lines and Pixel Boundaries . 1042.8.2 Drawing a Grid . 105

42.152.16Drawing Axes .Rubberband Lines .Drawing Dashed Lines .Drawing Dashed Lines by ExtendingCanvasRenderingContext2D .2.8.7 Line Caps and Joins .Arcs and Circles .2.9.1 The arc() Method .2.9.2 Rubberband Circles .2.9.3 The arcTo() Method .2.9.4 Dials and Gauges .Bézier Curves .2.10.1 Quadratic Curves .2.10.2 Cubic Curves .Polygons .2.11.1 Polygon Objects .Advanced Path Manipulation .2.12.1 Dragging Polygons .2.12.2 Editing Bézier Curves .2.12.3 Scrolling Paths into View .Transformations .2.13.1 Translating, Scaling, and Rotating .2.13.1.1 Mirroring .2.13.2 Custom Transformations .2.13.2.1 Algebraic Equations for Transformations .2.13.2.2 Using transform() and setTransform() .2.13.2.3 Translating, Rotating, and Scaling with transform()and setTransform() .2.13.2.4 Shear .Compositing .2.14.1 The Compositing Controversy .The Clipping Region .2.15.1 Erasing with the Clipping Region .2.15.2 Telescoping with the Clipping Region .Conclusion vii

viiiContentsChapter 3: Text . 2013.13.23.33.43.5Stroking and Filling Text .Setting Font Properties .Positioning Text .3.3.1 Horizontal and Vertical Positioning .3.3.2 Centering Text .3.3.3 Measuring Text .3.3.4 Labeling Axes .3.3.5 Labeling Dials .3.3.6 Drawing Text around an Arc .Implementing Text Controls .3.4.1 A Text Cursor .3.4.1.1 Erasing .3.4.1.2 Blinking .3.4.2 Editing a Line of Text in a Canvas .3.4.3 Paragraphs .3.4.3.1 Creating and Initializing a Paragraph .3.4.3.2 Positioning the Text Cursor in Response to MouseClicks .3.4.3.3 Inserting Text .3.4.3.4 New Lines .3.4.3.5 Backspace .Conclusion 42243244245252Chapter 4: Images and Video . 2534.14.24.34.44.5Drawing Images .4.1.1 Drawing an Image into a Canvas .4.1.2 The drawImage() Method .Scaling Images .4.2.1 Drawing Images outside Canvas Boundaries .Drawing a Canvas into a Canvas .Offscreen Canvases .Manipulating Images .4.5.1 Accessing Image Data .4.5.1.1 ImageData Objects .254255257259260266270274274279

Contents4.5.1.2Image Data Partial Rendering: putImageData’s DirtyRectangle .4.5.2 Modifying Image Data .4.5.2.1 Creating ImageData Objects withcreateImageData() .4.5.2.1.1 The Image Data Array .4.5.2.2 Image Data Looping Strategies .4.5.2.3 Filtering Images .4.5.2.4 Device Pixels vs. CSS Pixels, Redux .4.5.2.5 Image Processing Web Workers .4.6 Clipping Images .4.7 Animating Images .4.7.1 Animating with an Offscreen Canvas .4.8 Security .4.9 Performance .4.9.1 drawImage(HTMLImage) vs. drawImage(HTMLCanvas) vs.putImageData() .4.9.2 Drawing a Canvas vs. Drawing an Image, into a Canvas;Scaled vs. Unscaled .4.9.3 Looping over Image Data .4.9.3.1 Avoid Accessing Object Properties in the Loop: StoreProperties in Local Variables Instead .4.9.3.2 Loop over Every Pixel, Not over Every Pixel Value .4.9.3.3 Looping Backwards and Bit-Shifting Are CrapShoots .4.9.3.4 Don’t Call getImageData() Repeatedly for SmallAmounts of Data .4.10 A Magnifying Glass .4.10.1 Using an Offscreen Canvas .4.10.2 Accepting Dropped Images from the File System .4.11 Video Processing .4.11.1 Video Formats .4.11.1.1 Converting Formats .4.11.2 Playing Video in a Canvas .4.11.3 Processing Videos .4.12 Conclusion 17320320321321325326328329330331333337ix

xContentsChapter 5: Animation . 3395.1The Animation Loop .5.1.1 The requestAnimationFrame() Method: Letting the BrowserSet the Frame Rate .5.1.1.1 Firefox .5.1.1.2 Chrome .5.1.2 Internet Explorer .5.1.3 A Portable Animation Loop .5.2 Calculating Frame Rates .5.3 Scheduling Tasks at Alternate Frame Rates .5.4 Restoring the Background .5.4.1 Clipping .5.4.2 Blitting .5.5 Double Buffering .5.6 Time-Based Motion .

Core HTML5 Canvas Graphics, Animation, and Game Development David Geary Upper Saddle River, NJ Boston Indianapolis San Francisco New York Toronto Montreal London Munich Paris Madrid