book

HTML5 Canvas

by Steve Fulton, Jeff Fulton

May 2011

Beginner

650 pages

15h 39m

English

O'Reilly Media, Inc.

Read now

Unlock full access

Dedication
A Note Regarding Supplemental Files
Preface
Running the Examples in the BookWhat You Need to KnowHow This Book Is OrganizedConventions Used in This BookUsing Code ExamplesWe’d Like to Hear from YouSafari® Books OnlineAcknowledgments
1. Introduction to HTML5 Canvas
The Basic HTML Page<!doctype html><html lang="en"><meta charset="UTF-8"><title>…</title>A Simple HTML5 PageBasic HTML We Will Use in This Book<div><canvas>The Document Object Model (DOM) and CanvasJavaScript and CanvasJavaScript Frameworks and LibrariesWhere Does JavaScript Go and Why?HTML5 Canvas “Hello World!”Encapsulating Your JavaScript Code for CanvasAdding Canvas to the HTML PageUsing document to reference the canvas element in JavaScriptTesting to See Whether the Browser Supports CanvasRetrieving the 2D ContextThe drawScreen() FunctionDebugging with Console.logThe 2D Context and the Current StateThe HTML5 Canvas ObjectAnother Example: Guess The LetterHow the Game WorksThe “Guess The Letter” Game VariablesThe initGame() FunctionThe eventKeyPressed() FunctionThe drawScreen() FunctionExporting Canvas to an ImageThe Final Game CodeWhat’s Next
2. Drawing on the Canvas
The Basic File Setup for This ChapterThe Basic Rectangle ShapeThe Canvas StateWhat’s Not Part of the State?How Do We Save and Restore the Canvas State?Using Paths to Create LinesStarting and Ending a PathThe Actual DrawinglineCap attributescontext.lineCaplineJoin attributescontext.lineJoinlineWidthstrokeStyleExamples of More Advanced Line DrawingAdvanced Path MethodsArcscontext.arc()context.arcTo()Bezier CurvesThe Canvas Clipping RegionCompositing on the CanvasSimple Canvas TransformationsRotation and Translation TransformationsLesson 1: Transformations are applied to shapes and paths drawn after the setTransform() or other transformation function is calledLesson 2: We must “translate” the point of origin to the center of our shape to rotate it around its own centerScale TransformationsCombining Scale and Rotation TransformationsFilling Objects with Colors and GradientsSetting Basic Fill ColorsFilling Shapes with GradientsLinear gradientsLinear horizontal gradientsApplying a horizontal gradient to a strokeApplying a horizontal gradient to a complex shapeVertical gradientsDiagonal gradientsRadial gradientsFilling Shapes with PatternsCreating Shadows on Canvas ShapesWhat’s Next
3. The HTML5 Canvas Text API
Displaying Basic TextBasic Text DisplayHandling Basic Text in Text ArrangerCommunicating Between HTML Forms and the CanvasUsing measureTextCentering text using widthWhat about the height of the text?fillText and strokeTextSetting the Text FontFont Size, Face Weight, and Style BasicsHandling Font Size and Face in Text ArrangerAvailable font stylesAvailable font weightsGeneric font facesFont size and HTML5 range controlCreating the necessary variables in the canvasApp() functionSetting event handlers in canvasApp()Defining event handler functions in canvasApp()Setting the font in the drawScreen() functionFont ColorHandling font color with JSColorFont Baseline and AlignmentVertical alignmentHorizontal alignmentHandling text baseline and alignmentText Arranger Version 2.0Text and the Canvas ContextGlobal Alpha and TextHandling globalAlpha transparenciesGlobal Shadows and TextHandling global shadowsText with Gradients and PatternsLinear Gradients and TextRadial Gradients and TextImage Patterns and TextHandling Gradients and Patterns in Text ArrangerWidth, Height, Scale, and toDataURL() RevisitedDynamically Resizing the CanvasDynamically resizing in Text ArrangerDynamically Scaling the CanvasThe toDataURL() Method of the Canvas ObjectFinal Version of Text ArrangerWhat’s Next
4. Images on the Canvas
The Basic File Setup for This ChapterImage BasicsPreloading ImagesDisplaying an Image on the Canvas with drawImage()Resizing an Image Painted to the CanvasCopying Part of an Image to the CanvasSimple Cell-Based Sprite AnimationCreating an Animation Frame CounterCreating a Timer LoopChanging the Tile to DisplayAdvanced Cell-Based AnimationExamining the Tile SheetCreating an Animation ArrayChoosing the Tile to DisplayLooping Through the TilesDrawing the TileMoving the Image Across the CanvasApplying Rotation Transformations to an ImageCanvas Transformation BasicsStep 1: Save the current context to the stackStep 2: Reset the transformation matrix to identityStep 3: Code the transform algorithmStep 4: Draw the imageAnimating a Transformed ImageCreating a Grid of TilesDefining a Tile MapCreating a Tile Map with TiledDisplaying the Map on the CanvasMap height and widthStoring the map dataDisplaying the map on the canvasZooming and Panning an ImageCreating a Window for the ImageDrawing the Image WindowPanning the ImageZoom and Pan the ImageApplication: Controlled Pan and ZoomThe zoom scaleKeyboard inputPixel ManipulationThe Canvas Pixel Manipulation APIImageData attributesGetting image dataPutting image dataApplication Tile StamperHow ImageData.data is organizedA visual look at our basic applicationAdding mouse events to the canvasThe highlightTile() functionCopying from One Canvas to AnotherWhat’s Next
5. Math, Physics, and Animation
Moving in a Straight LineMoving Between Two Points: The Distance of a LineDrawing the ballTracing movement: A path of pointsMoving on a VectorBouncing Off WallsBouncing a Single BallMultiple Balls Bouncing Off WallsMultiple Balls Bouncing with a Dynamically Resized CanvasMultiple Balls Bouncing and CollidingBall interactions in physicsMaking sure the balls don’t start on top of each otherCircle collision detectionSeparating the code in drawScreen()Updating positions of objectsBetter interaction with the wallsCollisions with ballsBall collisions in depthMultiple Balls Bouncing with FrictionCurve and Circular MovementUniform Circular MotionMoving in a Simple SpiralCubic Bezier Curve MovementMoving an ImageCreating a Cubic Bezier Curve LoopSimple Gravity, Elasticity, and FrictionSimple GravitySimple Gravity with a BounceGravity with Bounce and Applied Simple ElasticitySimple Gravity, Simple Elasticity, and Simple FrictionEasingEasing Out (Landing the Ship)Easing In (Taking Off)What’s Next?
6. Mixing HTML5 Video and Canvas
HTML5 Video SupportTheora + Vorbis = .oggH.264 + $$$ = .mp4VP8 + Vorbis = .webmCombining All ThreeConverting Video FormatsBasic HTML5 Video ImplementationPlain-Vanilla Video EmbedVideo with Controls, Loop, and AutoplayAltering the Width and Height of the VideoDynamically scaling a videoPreloading Video in JavaScriptA Problem with Events and Embedded Video in HTML5Video and the CanvasDisplaying a Video on HTML5 CanvasVideo must still be embedded in HTMLVideo is displayed like an imageSet an interval to update the displayHTML5 Video PropertiesVideo on the Canvas ExamplesUsing the currentTime Property to Create Video EventsCanvas Video Transformations: RotationCanvas Video PuzzleSetting up the gameRandomizing the puzzle piecesDrawing the screenDetecting mouse interactions and the canvasCreating hit test point-style collision detectionSwapping two elements in a two-dimensional arrayTesting the gameCreating Video Controls on the CanvasCreating video buttonsPreloading the buttonsPlacing the buttonsListening for the button pressesAnimation Revisited: Moving VideosWhat’s Next?
7. Working with Audio
The Basic <audio> TagAudio FormatsSupported FormatsAudacityExample: Using All Three FormatsAudio Tag Properties, Functions, and EventsAudio FunctionsImportant Audio PropertiesImportant Audio EventsLoading and Playing the AudioDisplaying Attributes on the CanvasPlaying a Sound with No Audio TagDynamically Creating an Audio Element in JavaScriptFinding the Supported Audio FormatPlaying the SoundLook Ma, No Tag!Creating a Canvas Audio PlayerCreating Custom User Controls on the CanvasLoading the Button AssetsSetting Up the Audio Player ValuesMouse EventsSliding Play IndicatorPlay/Pause Push Button: Hit Test Point RevisitedLoop/No Loop Toggle ButtonClick-and-Drag Volume SliderVolume slider variablesVolume slider functionalityCase Study in Audio: Space Raiders GameWhy Sounds in Apps Are Different: Event SoundsIterationsSpace Raiders Game StructureState machineInitializing the game: no global variablesPreloading all assets without global variablesResetting the gameMouse controlBounding box collision detectionPlaying the gameIteration #1: Playing Sounds Using a Single ObjectIteration #2: Creating Unlimited Dynamic Sound ObjectsIteration #3: Creating a Sound PoolIteration #4: Reusing Preloaded SoundsOther stuff you could do to improve the gameThe final code for Space RaidersWhat’s Next

8. Canvas Game Essentials
Why Games in HTML5?Canvas Compared to FlashWhat Does Canvas Offer?Our Basic Game HTML5 FileOur Game’s DesignGame Graphics: Drawing with PathsNeeded AssetsUsing Paths to Draw the Game’s Main CharacterThe static player ship (frame 1)The ship with thrust engaged (frame 2)Animating on the CanvasGame Timer LoopThe Player Ship State ChangesApplying Transformations to Game GraphicsThe Canvas StackGame Graphic TransformationsRotating the Player Ship from the CenterAlpha Fading the Player ShipUsing the context.globalAlpha attributeGame Object Physics and AnimationHow Our Player Ship Will MoveThe difference between facing and movingThrusting in the rotated directionRedrawing the player ship to start at angle 0Controlling the Player Ship with the KeyboardThe array to hold our key pressesThe key eventsEvaluating key pressesGiving the Player Ship a Maximum VelocityA Basic Game FrameworkThe Game State MachineThe Update/Render (Repeat) CycleThe FrameRateCounter Object PrototypePutting It All TogetherGeo Blaster Game StructureGame application statesGame application state functionsGame application functionsGeo Blaster Global Game VariablesThe player ObjectGeo Blaster Game AlgorithmsArrays of Logical Display ObjectsRocksSaucersMissilesExplosions and particlesLevel KnobsLevel and Game EndLevel endGame endAwarding the Player Extra ShipsApplying Collision DetectionThe Geo Blaster Basic Full SourceRock Object PrototypeWhat’s Next
9. Combining Bitmaps and Sound
Geo Blaster ExtendedGeo Blaster Tile SheetRefresher: Calculating the tile source locationOther new player attributesThe new boundingBoxCollide() algorithmRendering the Other Game ObjectsRendering the saucersRendering the rocksRendering the missilesRendering the particlesAdding SoundThe sounds for our gameAdding sound instances and management variables to the gameLoading in sounds and tile sheet assetsPlaying soundsPooling Object InstancesObject pooling in Geo Blaster ExtendedAdding pooling variables to our gameAdding in a Step TimerHow the step timer worksGeo Blaster Extended Full SourceCreating a Dynamic Tile Sheet at RuntimeA Simple Tile-Based GameMicro Tank Maze DescriptionGame progressionGame strategyThe Tile Sheet for Our GameThe PlayfieldCreating the boardThe PlayerThe EnemyThe GoalThe ExplosionsTurn-Based Game Flow and the State MachineGAME_STATE_INITGAME_STATE_WAIT_FOR_LOADGAME_STATE_TITLEGAME_STATE_NEW_GAMEGAME_STATE_WAIT_FOR_PLAYER_MOVEGAME_STATE_ANIMATE_PLAYERGAME_STATE_EVALUATE_PLAYER_MOVEGAME_STATE_ENEMY_MOVEGAME_STATE_ANIMATE_ENEMYGAME_STATE_EVALUATE_ENEMY_MOVEGAME_STATE_EVALUATE_OUTCOMEGAME_STATE_ANIMATE_EXPLODEGAME_STATE_CHECK_FOR_GAME_OVERGAME_STATE_PLAYER_WINGAME_STATE_PLAYER_LOSESimple Tile Movement Logic OverviewRendering Logic OverviewSimple Homegrown AI OverviewMicro Tank Maze Complete Game CodeWhat’s Next
10. Mobilizing Games with PhoneGap
Going Mobile!Introducing PhoneGapThe ApplicationThe CodeExamining the Code for BSBingo.htmlThe TextButton.js fileThe initLists() functionThe initButtons() functionThe initSounds() functionThe chooseButtonsForCard() functionThe drawScreen() functionThe onMouseClick() functionThe onMouseMove() functionThe Application CodeCreating the iOS Application with PhoneGapInstalling XcodeInstalling PhoneGapCreating the BS Bingo PhoneGap Project in XcodeTesting the New Blank Application in the SimulatorIntegrating BS Bingo into the ProjectSetting the OrientationChanging the Banner and IconTesting on the SimulatorAdding in an iPhone “Gesture”Adding the Gesture Functions to index.htmlTesting on a DeviceStep 1: Launch the Provisioning AssistantStep 2: Find the device’s Unique IDStep 3: Generate a Certificate Signing RequestStep 4: Locate saved Certificate Signing Request FileStep 5: Drag provisioning file into Xcode Organizer windowStep 6: Set up certificates with the KeychainSuccessUsing Xcode to Target a Test DeviceBeyond the CanvasWhat’s Next
11. Further Explorations
3D with WebGLWhat Is WebGL?How Do I Test WebGL?How Do I Learn More About WebGL?What Does a WebGL Application Look Like?JavaScript librariesShadersTesting for WebGL support with ModernizrInitialization in canvasApp()Animating the cubeFull Code ListingFurther Explorations with WebGLWebGL JavaScript LibrariesGoogle O3DGLGEC3DLSpiderGLSceneJSCopperLichtMultiplayer Applications with ElectroServer 5Installing ElectroServerStarting the serverThe ElectroServer admin toolThe JavaScript APIThe Basic Architecture of a Socket-Server ApplicationThe Basic Architecture of an ElectroServer ApplicationClientZones, rooms, and gamesExtensionsCreating a Chat Application with ElectroServerEstablishing a connection to ElectroServerCreating the chat functionalityTesting the Application in Google ChromeFurther Explorations with ElectroServerThis Is Just the Tip of the IcebergConclusion
Index
About the Authors
Colophon
Copyright

Content preview from HTML5 Canvas

Chapter 2. Drawing on the Canvas

Using HTML5 Canvas effectively requires a strong foundation in drawing, coloring, and transforming basic two-dimensional shapes. While the selection of built-in shapes is relatively limited, we can draw any shape we desire using a series of line segments called paths, which we will discuss in the upcoming section Using Paths to Create Lines.

Note

The HTML5 Canvas API is well covered in many online forms. The W3C site has an exhaustive and constantly updated reference that details the features of the Canvas 2D Drawing API. It can be viewed at http://dev.w3.org/2006/canvas-api/canvas-2d-api.html.

However, this online reference lacks concrete examples on using the API. Rather than simply reprinting this entire specification, we will spend our time creating examples to explain and explore as many features as we have space to cover.

The Basic File Setup for This Chapter

As we proceed through the Drawing API, all the examples in this chapter will use the same basic file setup, shown below. Use this code as the basis for all of the examples we create. You will only have to change the contents of the drawScreen() function:

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Ch2BaseFile - Template For Chapter 2 Examples</title> <script src="modernizr-1.6.min.js"></script> <script type="text/javascript"> window.addEventListener('load', eventWindowLoaded, false); function eventWindowLoaded() { canvasApp(); } function canvasSupport () { return Modernizr.canvas; ...

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.

Julian F.

Head of Cybersecurity

I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.

Addison B.

Field Engineer

I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.

Amir M.

Data Platform Tech Lead

I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.

Mark W.

Embedded Software Engineer

Publisher Resources

ISBN: 9781449308032Errata Page

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design