ptg7987094 ptg7987094 Core HTML5 Canvas ptg7987094 This page intentionally left blank ptg7987094 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 Capetown • Sydney • Tokyo • Singapore • Mexico City ptg7987094 Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in this book, and the publisher was aware of a trademark claim, 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 or implied warranty of any kind and assume no responsibility for errors or omissions. No liability is assumed for incidental or consequential damages in connection with or arising out of the use of the information or programs contained herein. The publisher offers excellent discounts on this book when ordered in quantity for bulk purchases or special sales, which may include electronic versions and/or custom covers and content particular to your business, training goals, marketing focus, and branding interests. For more information, please contact: U.S. Corporate and Government Sales (800) 382–3419 corpsales@pearsontechgroup.com For sales outside the United States, please contact: International Sales international@pearson.com Visit us on the Web: informit.com/ph Library of Congress Cataloging-in-Publication Data Geary, David M. Core HTML5 canvas : graphics, animation, and game development / David Geary. 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 2012 006.6'6—dc23 2012006871 Copyright © 2012 David Geary All 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 a retrieval 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 written request to Pearson Education, Inc., Permissions Department, One Lake Street, Upper Saddle River, New Jersey 07458, or you may fax your request to (201) 236-3290. ISBN-13: 978-0-13-276161-1 ISBN-10: 0-13-276161-0 Text printed in the United States on recycled paper at RR Donnelley in Crawfordsville, Indiana. First printing, May 2012 ptg7987094 xv Preface . xxiii Acknowledgments . xxv About the Author . 1 Chapter 1: Essentials . 1 The canvas Element 1.1 5Canvas Element Size vs. Drawing Surface Size 1.1.1 7The Canvas API 1.1.2 8Canvas Contexts . 1.2 9The 2d Context 1.2.1 11The WebGL 3d Context 1.2.1.1 11Saving and Restoring Canvas State . 1.2.2 12Canonical Examples in This Book . 1.3 14Getting Started 1.4 14Specifications . 1.4.1 15Browsers . 1.4.2 16Consoles and Debuggers . 1.4.3 18Performance 1.4.4 19Profiles and Timelines 1.4.4.1 20jsPerf 1.4.4.2 22Fundamental Drawing Operations . 1.5 26Event Handling . 1.6 26Mouse Events 1.6.1 26 Translating Mouse Coordinates to Canvas 1.6.1.1 Coordinates 31Keyboard Events 1.6.2 33Touch Events 1.6.3 33Saving and Restoring the Drawing Surface . 1.7 36Using HTML Elements in a Canvas . 1.8 41Invisible HTML Elements . 1.8.1 Contents v ptg7987094 46Printing a Canvas 1.9 51Offscreen Canvases 1.10 53A Brief Math Primer 1.11 54Solving Algebraic Equations 1.11.1 54Trigonometry 1.11.2 54Angles: Degrees and Radians 1.11.2.1 55Sine, Cosine, and Tangent 1.11.2.2 56Vectors 1.11.3 57Vector Magnitude 1.11.3.1 58Unit Vectors 1.11.3.2 59Adding and Subtracting Vectors 1.11.3.3 60The Dot Product of Two Vectors 1.11.3.4 62Deriving Equations from Units of Measure 1.11.4 64Conclusion 1.12 65Chapter 2: Drawing . 67The Coordinate System 2.1 68The Drawing Model . 2.2 70Drawing Rectangles 2.3 72Colors and Transparency 2.4 76Gradients and Patterns 2.5 76Gradients 2.5.1 76Linear Gradients 2.5.1.1 78Radial Gradients 2.5.1.2 79Patterns 2.5.2 83Shadows 2.6 85Inset Shadows . 2.6.1 88Paths, Stroking, and Filling 2.7 93Paths and Subpaths 2.7.1 94The Nonzero Winding Rule for Filling Paths 2.7.1.1 95Cutouts 2.7.2 98Cutout Shapes 2.7.2.1 103Lines 2.8 104Lines and Pixel Boundaries 2.8.1 105Drawing a Grid . 2.8.2 Contents vi ptg7987094 107Drawing Axes 2.8.3 110Rubberband Lines 2.8.4 117Drawing Dashed Lines 2.8.5 118 Drawing Dashed Lines by Extending CanvasRenderingContext2D 2.8.6 121Line Caps and Joins 2.8.7 124Arcs and Circles 2.9 124The arc() Method 2.9.1 126Rubberband Circles 2.9.2 127The arcTo() Method . 2.9.3 130Dials and Gauges 2.9.4 137Bézier Curves 2.10 137Quadratic Curves 2.10.1 141Cubic Curves 2.10.2 144Polygons 2.11 147Polygon Objects 2.11.1 150Advanced Path Manipulation . 2.12 151Dragging Polygons 2.12.1 158Editing Bézier Curves 2.12.2 169Scrolling Paths into View 2.12.3 170Transformations . 2.13 171Translating, Scaling, and Rotating 2.13.1 173Mirroring 2.13.1.1 174Custom Transformations . 2.13.2 175Algebraic Equations for Transformations 2.13.2.1 176Using transform() and setTransform() 2.13.2.2 177 Translating, Rotating, and Scaling with transform()2.13.2.3 and setTransform() 179Shear 2.13.2.4 181Compositing 2.14 186The Compositing Controversy 2.14.1 187The Clipping Region 2.15 187Erasing with the Clipping Region 2.15.1 194Telescoping with the Clipping Region 2.15.2 198Conclusion 2.16 vii Contents ptg7987094 201Chapter 3: Text 202Stroking and Filling Text . 3.1 207Setting Font Properties 3.2 210Positioning Text . 3.3 210Horizontal and Vertical Positioning . 3.3.1 214Centering Text 3.3.2 215Measuring Text . 3.3.3 217Labeling Axes 3.3.4 221Labeling Dials . 3.3.5 223Drawing Text around an Arc . 3.3.6 225Implementing Text Controls 3.4 225A Text Cursor 3.4.1 228Erasing 3.4.1.1 230Blinking . 3.4.1.2 232Editing a Line of Text in a Canvas . 3.4.2 238Paragraphs 3.4.3 242Creating and Initializing a Paragraph . 333 444 333 1 2224442 Positioning the Text Cursor in Response to Mouse2 Clicks 3 Inserting Text 3.4.3.3 244 New Lines 3.4.3.4 245 Backspace . 3.4.3.5 252 Conclusion . 3.5 253Chapter 4: Images and Video 254Drawing Images 4.1 255Drawing an Image into a Canvas . 4.1.1 257The drawImage() Method . 4.1.2 259Scaling Images 4.2 260Drawing Images outside Canvas Boundaries 4.2.1 266Drawing a Canvas into a Canvas 4.3 270Offscreen Canvases 4.4 274Manipulating Images 4.5 274Accessing Image Data 4.5.1 279ImageData Objects . 4.5.1.1 Contents viii ptg7987094 280 Image Data Partial Rendering: putImageData’s Dirty 4.5.1.2 Rectangle 283Modifying Image Data . 4.5.2 285 Creating ImageData Objects with createImageData() 4.5.2.1 286The Image Data Array . 4.5.2.1.1 292Image Data Looping Strategies . 4.5.2.2 293Filtering Images 4.5.2.3 295Device Pixels vs. CSS Pixels, Redux 4.5.2.4 299Image Processing Web Workers . 4.5.2.5 302Clipping Images 4.6 306Animating Images 4.7 309Animating with an Offscreen Canvas . 4.7.1 312Security 4.8 313Performance 4.9 314 33317 drawImage(HTMLImage) vs. drawImage(HTMLCanvas) vs. 4.9.1 putImageData() . Drawing a Canvas vs. Drawing an Image, into a Canvas; 316 4.9.2 Scaled vs. Unscaled . 317 Looping over Image Data 4.9.3 Avoid Accessing Object Properties in the Loop: Store 4.9.3.1 Properties in Local Variables Instead 20 Loop over Every Pixel, Not over Every Pixel Value 4.9.3.2 Looping Backwards and Bit-Shifting Are Crap 320 4.9.3.3 Shoots . 321 Don’t Call getImageData() Repeatedly for Small 4.9.3.4 Amounts of Data 321A Magnifying Glass . 4.10 325Using an Offscreen Canvas . 4.10.1 326Accepting Dropped Images from the File System . 4.10.2 328Video Processing . 4.11 329Video Formats . 4.11.1 330Converting Formats 4.11.1.1 331Playing Video in a Canvas . 4.11.2 333Processing Videos . 4.11.3 337Conclusion 4.12 ix Contents [...]... The canvas Element The canvas element is arguably the single most powerful HTML5 element, although, as you’ll see shortly, its real power lies in the Canvas context, which 1 2 Chapter 1 Essentials Figure 1.1 Canvas offers a powerful graphics API you obtain from the canvas element itself Figure 1.2 shows a simple use of the canvas element and its associated context Figure 1.2 Hello canvas 1.1 The canvas. .. attributes Other than the canvas attribute, which gives you a reference to the canvas itself, all of the 2d context attributes pertain to drawing operations Table 1.3 CanvasRenderingContext2D attributes Attribute Brief Description canvas Refers to the context’s canvas The most common use of the canvas attribute is to access the width and height of the canvas: context .canvas. width and context .canvas. height, respectively... Simple Canvas Example body { background: #dddddd; } #canvas { margin: 10px; padding: 10px; background: #ffffff; border: thin inset #aaaaaa; } Canvas not supported < /canvas> 3 4 Chapter 1 Example 1.2 Essentials example.js var canvas = document.getElementById( 'canvas' ),... document.getElementById( 'canvas' ), context = canvas. getContext('2d'); context.font = '38pt Arial'; context.fillStyle = 'cornflowerblue'; context.strokeStyle = 'blue'; context.fillText('Hello Canvas' , canvas. width/2 - 150, canvas. height/2 + 15); context.strokeText('Hello Canvas' , canvas. width/2 - 150, canvas. height/2 + 15 ); The JavaScript in Example 1.2 employs a recipe that you will use in your Canvas- based applications:... covered in this book As the Canvas specification evolves and browser vendors implement new features, this book will be updated on a regular basis In the meantime, you can read about new Canvas features and preview the coverage of those features in the next edition of this book, at corehtml 5canvas. com The Companion Website This book’s companion website is http://corehtml 5canvas. com, where you can download... #ffffff; border: thin inset #aaaaaa; width: 600px; height: 300px; } Canvas not supported < /canvas> 5 6 Chapter 1 Essentials The difference between using CSS and setting canvas element attributes lies in the fact that a canvas actually has two sizes: the size of the element itself and the size of the element’s... polygons in a canvas so users users can edit them, and using the clipping region to erase shapes without disturbing the Canvas background underneath The third chapter—Text—shows you how to draw and manipulate text in a canvas You will see how to stroke and fill text, set font properties, and position text within a canvas The chapter also shows you how to implement your own text controls in a canvas, complete... published by Prentice Hall 3 Core JavaServer™ Faces, Third Edition, 2010, by David Geary and Cay Horstmann, published by Prentice Hall xv xvi Preface hardware accelerates Canvas in Mobile Safari Browser vendors have also done a great job adhering to the specification so that well-written Canvas applications run unmodified in any HTML5- compliant browser with only minor incompatibilities HTML5 is the Renaissance... within the canvas to display the text The JavaScript shown in Example 1.2 approximately centers the text with constant values, which is not a good general solution for centering text in a canvas In Chapter 3, we will look at a better way to center text CAUTION: The suffix px is not valid for canvas width and height Although it’s widely permitted by browsers that support Canvas, the px suffix for the canvas. .. attributes is not technically allowed by the Canvas specification The values for those attributes, according to the specification, can only be non-negative integers 1.1 The canvas Element NOTE: The default canvas size is 300 × 150 screen pixels By default, the browser creates canvas elements with a width of 300 pixels and a height of 150 pixels.You can change the size of a canvas element by specifying the width . ptg7987094 ptg7987094 Core HTML5 Canvas ptg7987094 This page intentionally left blank ptg7987094 Core HTML5 Canvas Graphics, Animation, and. 1 Chapter 1: Essentials . 1 The canvas Element 1.1 5Canvas Element Size vs. Drawing Surface Size 1.1.1 7The Canvas API 1.1.2 8Canvas Contexts . 1.2 9The 2d