book

Supercharged JavaScript Graphics

by Raffaele Cecco

July 2011

Intermediate to advanced

278 pages

7h 20m

English

O'Reilly Media, Inc.

Read now

Unlock full access

Audience and AssumptionsOrganizationConventions Used in This BookUsing Code ExamplesTarget BrowsersSafari® Books OnlineHow to Contact UsAcknowledgments
Keeping It FastWhat and When to OptimizeHomespun Code ProfilingOptimizing JavaScriptLookup TablesBitwise Operators, Integers, and Binary NumbersA quick recap of binary numbersJavaScript’s bitwise operatorsBitwise AND (x & y)Bitwise OR (x | y)Bitwise XOR (x ^ y)Bitwise NOT (~x)Shift left (x << numBits)Shift right with sign (x >> numBits)Shift right with zero fill (x >>> y)Loop unrolling: An inconvenient truthOptimizing jQuery and DOM InteractionOptimizing CSS Style ChangesOptimizing DOM InsertionOther Resources
Creating DHTML SpritesImage AnimationEncapsulation and Drawing Abstraction (aka Hiding Stuff)Minimizing DOM Insertion and DeletionThe Sprite CodeA Simple Sprite ApplicationA More Dynamic Sprite ApplicationConverting into a jQuery Plug-inTimers, Speed, and Frame RateUsing setInterval and setTimeoutTimer AccuracyAchieving Consistent SpeedInternet Explorer 6 Background Image Caching
CSS-Only Scrolling EffectsScrolling with JavaScriptBackground Image ScrollingTile-Based Image ScrollingSnapping......and WrappingKeeping things fastTile scrolling codeCreating tile maps with TiledTiled file formatTile scroller page layout
HTML5 FormsUsing JavaScript UI LibrariesUsing jQuery UI for Enhanced Web InterfacesLoading and using jQuery UITheming jQuery UIHeavy Duty UI with Ext JSLoading and using Ext JSCreating UI Elements from ScratchCreating a 3D CarouselCarousel specificationsCarousel image loadingCarousel item objectsThe carousel objectThe jQuery plug-in partCarousel page layout
Game Objects OverviewThe Game CodeGame-Wide VariablesReading KeysMoving EverythingA Simple AnimatorCollision DetectionAliensAlien bombsAlien invadersAliens managerThe PlayerTankLaserShieldsMystery SaucerThe GamePutting It All Together
Canvas SupportBitmaps, Vectors, or Both?Canvas LimitationsCanvas Versus SVGCanvas Versus Adobe FlashCanvas ExportersCanvas Drawing BasicsThe Canvas ElementThe Drawing ContextDrawing RectanglesDrawing Paths with Lines and CurvesDrawing Bitmap ImagesColors, Strokes, and FillsAnimating with CanvasCanvas and Recursive DrawingCanvas Tree Page LayoutReplacing DHTML Sprites with Canvas SpritesThe New CanvasSprite ObjectOther Code ChangesA Graphical Chat Application with Canvas and WebSocketsThe WebSockets AdvantageWebSockets Support and SecurityTurning on WebSockets in Firefox 4 and Opera 11The Chat ApplicationThe socket serverInstalling a web hosting environment locallyThe cameraThe avatarsThe chat textThe backgroundInitializationThe page code
Operations on VectorsAddition and SubtractionScalingNormalizationRotationDot ProductCreating a JavaScript Vector ObjectA Cannon Simulation Using VectorsSimulation-Wide VariablesThe CannonballThe CannonThe BackgroundThe Main LoopPage LayoutRocket SimulationThe Game ObjectThe Obstacle ObjectThe Rocket ObjectBackgroundCollision Detection and ResponsePage CodePossible Improvements and Modifications
LimitationsChart GlossaryImage ChartsData Formats and Chart ResolutionBasic text formatText format with custom scalingSimple encoding formatExtended encoding formatUsing Dynamic DataSummaryInteractive ChartsInteractive Charts EventsRetrieving event information
jQuery MobileTilePic: A Mobile-Friendly Web ApplicationTilePic Game DescriptionTilePic Game CodeApplication-wide variablesThe tile objectChecking whether the puzzle is solvedMoving tilesShuffling the tilesTilePic setup codeTilePic eventsTilePic page layoutPhoneGap

Installing PhoneGapInstalling the Java JDKInstalling the Android SDKInstalling EclipseInstalling Android Development ToolsInstalling PhoneGapCreating a PhoneGap Project in EclipseAltering the App.java FileAltering the AndroidManifest.xml FileCreating and Testing a Simple Web ApplicationTesting the TilePic Application

Content preview from Supercharged JavaScript Graphics

Chapter 6. HTML5 Canvas

One of HTML5’s most tantalizing features is the Canvas element. Taking the form of a simple rectangular area within the page (similar to a div), Canvas allows you to draw sophisticated graphics inside it using JavaScript. It was initially developed by Apple for rendering user interface widgets and other imagery within the Mac operating system and by the Safari browser. Apple released its patents relating to Canvas under the World Wide Web Consortium’s (W3C) royalty-free licensing terms. This means that Apple provides royalty-free licensing for Canvas when it appears within the context of W3C HTML recommendations.

This chapter covers the basics of Canvas and uses it to implement various practical applications. A fully exhaustive coverage of the tag is beyond the scope of this book, but if this chapter whets your appetite, you may wish to consider the following titles to increase your knowledge:

Canvas Pocket Reference by David Flanagan (O’Reilly; http://oreilly.com/catalog/0636920016045)
HTML5 Canvas by Steve Fulton and Jeff Fulton (O’Reilly; http://oreilly.com/catalog/0636920013327)

Canvas is a low-level, immediate mode application programming interface (API):

Low level: Canvas provides a fast but fairly basic feature set. For instance, rectangles are the only native primitive shape. However, you can augment the feature set via JavaScript programming.
Immediate mode: Canvas drawing instructions are executed the moment they are called; unlike SVG, Canvas has no intermediate ...