book

HTML5 Canvas, 2nd Edition

by Steve Fulton, Jeff Fulton

April 2013

Beginner

750 pages

20h 21m

English

O'Reilly Media, Inc.

Read now

Unlock full access

So what kind of mechanism are they suggesting?So what does this mean for developers?
lineCap attributescontext.lineCaplineJoin attributescontext.lineJoinlineWidthstrokeStyle
context.arc()context.arcTo()
Lesson 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 center
Linear gradientsLinear horizontal gradientsApplying a horizontal gradient to a strokeApplying a horizontal gradient to a complex shapeVertical gradientsDiagonal gradientsRadial gradients
Centering text using widthWhat about the height of the text?
Available 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() function
Vertical alignmentHorizontal alignmentHandling text baseline and alignment
Step 1: Save the current context to the stackStep 2: Reset the transformation matrix to identityStep 3: Code the transform algorithmStep 4: Draw the image
Map height and widthStoring the map dataDisplaying the map on the canvas
ImageData attributesGetting image dataPutting image data
How ImageData.data is organizedA visual look at our basic applicationAdding mouse events to the canvasThe highlightTile() function
The pixelX loopThe nested pixelY loopThe collision checkAll of the code for this example
Drawing the ballTracing movement: A path of points
Ball 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 depth
Video must still be embedded in HTMLVideo is displayed like an imageSet an interval to update the display
Setting 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 game
Creating video buttonsPreloading the buttonsPlacing the buttonsListening for the button presses
Volume slider variablesVolume slider functionality
State machineInitializing the game: no global variablesPreloading all assets without global variablesResetting the gameMouse controlBounding box collision detectionPlaying the game
Other stuff you could do to improve the gameThe final code for Space Raiders
The static player ship (frame 1)The ship with thrust engaged (frame 2)
The difference between facing and movingThrusting in the rotated directionRedrawing the player ship to start at angle 0
The array to hold our key pressesThe key eventsEvaluating key presses
Game application statesGame application state functionsGame application functions
RocksSaucersMissilesExplosions and particles
Level endGame end
Game variables for tank movement and node changesLogic for updating the tank node and positionDrawing the tank on the screen
Refresher: Calculating the tile source locationOther new player attributesThe new boundingBoxCollide() algorithm
Rendering the saucersRendering the rocksRendering the missilesRendering the particles
The sounds for our gameAdding sound instances and management variables to the gameLoading in sounds and tile sheet assetsPlaying sounds
Object pooling in Geo Blaster ExtendedAdding pooling variables to our game
Game progressionGame strategy
GAME_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_LOSE
The camera top-left positionThe camera scrolled positionThe camera far-right scrolled positionThe camera far down scrolled position
The TextButton.js fileThe initLists() functionThe initButtons() functionThe initSounds() functionThe chooseButtonsForCard() functionThe drawScreen() functionThe onMouseClick() functionThe onMouseMove() function
Starting to create a full screen mobile version of BS BingoChanging the Canvas style propertiesUpdating the mouse listening codeAdding meta-tags for iOS devices
Canvas elementMeta-tagsStyle sheets
New global variablesNew listener functionsAuto-firePlayer movementChecking out the game
JavaScript librariesShadersTesting for WebGL support with ModernizrInitialization in canvasApp()Animating the cube
Google O3DC3DLSpiderGLSceneJSCopperLichtGLGEThree.js
Starting the serverThe ElectroServer admin toolThe JavaScript API
ClientZones, rooms, and gamesExtensions
Establishing a connection to ElectroServerCreating the chat functionality
EventDispatcher.jsOrnament.jsDisplayList.jsGameUtilities.jsDragAndDrop.jsDragAndDrop.html
supportsContext()toDataURLHD(), toBlob(), toBlobHD()

Overview

Flash is fading fast as Canvas continues to climb. The second edition of this popular book gets you started with HTML5 Canvas by showing you how to build interactive multimedia applications. You’ll learn how to draw, render text, manipulate images, and create animation—all in the course of building an interactive web game throughout the book.

Updated for the latest implementations of Canvas and related HTML5 technologies, this edition includes clear and reusable code examples to help you quickly pick up the basics—whether you currently use Flash, Silverlight, or just HTML and JavaScript. Discover why HTML5 is the future of innovative web development.

Create and modify 2D drawings, text, and bitmap images
Use algorithms for math-based movement and physics interactions
Incorporate and manipulate video, and add audio
Build a basic framework for creating a variety of games
Use bitmaps and tile sheets to develop animated game graphics
Go mobile: build web apps and then modify them for iOS devices
Explore ways to use Canvas for 3D and multiplayer game applications

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.

Start your free trial

Publisher Resources

ISBN: 9781449335847Supplemental Content Errata Page

HTML5 Canvas, 2nd Edition

by Steve Fulton, Jeff Fulton

Overview

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.

You might also like

HTML5 Canvas

HTML5 Canvas for Developers

HTML5 Canvas Cookbook

Physics for JavaScript Games, Animation, and Simulations: with HTML5 Canvas

Publisher Resources