You are previewing HTML5 Canvas.

HTML5 Canvas

Cover of HTML5 Canvas by Steve Fulton... Published by O'Reilly Media, Inc.
  1. HTML5 Canvas
    1. SPECIAL OFFER: Upgrade this ebook with O’Reilly
    2. A Note Regarding Supplemental Files
    3. Preface
      1. Running the Examples in the Book
      2. What You Need to Know
      3. How This Book Is Organized
      4. Conventions Used in This Book
      5. Using Code Examples
      6. We’d Like to Hear from You
      7. Safari® Books Online
      8. Acknowledgments
    4. 1. Introduction to HTML5 Canvas
      1. The Basic HTML Page
      2. Basic HTML We Will Use in This Book
      3. The Document Object Model (DOM) and Canvas
      4. JavaScript and Canvas
      5. HTML5 Canvas “Hello World!”
      6. Debugging with Console.log
      7. The 2D Context and the Current State
      8. The HTML5 Canvas Object
      9. Another Example: Guess The Letter
      10. What’s Next
    5. 2. Drawing on the Canvas
      1. The Basic File Setup for This Chapter
      2. The Basic Rectangle Shape
      3. The Canvas State
      4. Using Paths to Create Lines
      5. Advanced Path Methods
      6. Compositing on the Canvas
      7. Simple Canvas Transformations
      8. Filling Objects with Colors and Gradients
      9. Filling Shapes with Patterns
      10. Creating Shadows on Canvas Shapes
      11. What’s Next
    6. 3. The HTML5 Canvas Text API
      1. Displaying Basic Text
      2. Setting the Text Font
      3. Text and the Canvas Context
      4. Text with Gradients and Patterns
      5. Width, Height, Scale, and toDataURL() Revisited
      6. Final Version of Text Arranger
      7. What’s Next
    7. 4. Images on the Canvas
      1. The Basic File Setup for This Chapter
      2. Image Basics
      3. Simple Cell-Based Sprite Animation
      4. Advanced Cell-Based Animation
      5. Applying Rotation Transformations to an Image
      6. Creating a Grid of Tiles
      7. Zooming and Panning an Image
      8. Pixel Manipulation
      9. Copying from One Canvas to Another
      10. What’s Next
    8. 5. Math, Physics, and Animation
      1. Moving in a Straight Line
      2. Bouncing Off Walls
      3. Curve and Circular Movement
      4. Simple Gravity, Elasticity, and Friction
      5. Easing
      6. What’s Next?
    9. 6. Mixing HTML5 Video and Canvas
      1. HTML5 Video Support
      2. Converting Video Formats
      3. Basic HTML5 Video Implementation
      4. Preloading Video in JavaScript
      5. Video and the Canvas
      6. Video on the Canvas Examples
      7. Animation Revisited: Moving Videos
      8. What’s Next?
    10. 7. Working with Audio
      1. The Basic <audio> Tag
      2. Audio Formats
      3. Audio Tag Properties, Functions, and Events
      4. Playing a Sound with No Audio Tag
      5. Creating a Canvas Audio Player
      6. Case Study in Audio: Space Raiders Game
      7. What’s Next
    11. 8. Canvas Game Essentials
      1. Why Games in HTML5?
      2. Our Basic Game HTML5 File
      3. Our Game’s Design
      4. Game Graphics: Drawing with Paths
      5. Animating on the Canvas
      6. Applying Transformations to Game Graphics
      7. Game Graphic Transformations
      8. Game Object Physics and Animation
      9. A Basic Game Framework
      10. Putting It All Together
      11. The player Object
      12. Geo Blaster Game Algorithms
      13. The Geo Blaster Basic Full Source
      14. Rock Object Prototype
      15. What’s Next
    12. 9. Combining Bitmaps and Sound
      1. Geo Blaster Extended
      2. Creating a Dynamic Tile Sheet at Runtime
      3. A Simple Tile-Based Game
      4. What’s Next
    13. 10. Mobilizing Games with PhoneGap
      1. Going Mobile!
      2. Creating the iOS Application with PhoneGap
      3. Beyond the Canvas
      4. What’s Next
    14. 11. Further Explorations
      1. 3D with WebGL
      2. Multiplayer Applications with ElectroServer 5
      3. Conclusion
    15. Index
    16. About the Authors
    17. Colophon
    18. SPECIAL OFFER: Upgrade this ebook with O’Reilly
O'Reilly logo

Game Graphic Transformations

As we saw in the previous section, we can easily rotate a game graphic at the top-left corner by using the context.rotate() transformation. However, our game will need to rotate objects at the center rather than the top-left corner. To do this, we must change the transformation point to the center of our game graphic object.

Rotating the Player Ship from the Center

The code to rotate the player ship from its center point is almost exactly like the code used to rotate it at the top-left corner. What we need to modify is the point of the translation. In Example 8-5, we placed the immediate-mode drawing context at the x and y coordinates of our game object (50,50). This had the effect of rotating the object from the top-left corner. Now we must move the translation to the center of our object:

context.translate(x+.5*width,y+.5*height);

Note

The width and height variables represent attributes of our drawn player ship. We will create these attributes in Example 8-6.

This is not the only change we need to make; we also need to draw our ship as though it is the center point. To do this, we will subtract half the width from each x attribute in our path draw sequence, and half the height from each y attribute:

context.moveTo(10-.5*width,0-.5*height);
context.lineTo(19-.5*width,19-.5*height);

As you can see, it might get a little confusing trying to draw coordinates in this manner. It is also slightly more processor-intensive than using constants. In that case, we would simply hardcode in the needed values. Remember, the width and height attributes of our ship are both 20. The hardcoded version would look something like this:

context.moveTo(0,−10);  //10-10, 0-10
context.lineTo(9,9); //19-10, 19-10

The method where we use the calculated values (using the width and height variables) is much more flexible, while the hardcoded method is much less processor-intensive. Example 8-6 contains all the code to use either method. We have commented out the calculated version of the code.

Example 8-6. Rotating an image from its center point

//canvasApp level variables
   var rotation = 0;
   var x = 50;
   var y = 50;   var width = 20;
   var height = 20;

   function drawScreen() {
      // draw background and text
      context.fillStyle = '#000000';
      context.fillRect(0, 0, 200, 200);
      context.fillStyle = '#ffffff';
      context.font = '20px _sans';
      context.textBaseline = 'top';
      context.fillText  ("Player Ship - rotate", 0, 180);

      //transformation
      var angleInRadians = rotation * Math.PI / 180;
      context.save(); //save current state in stack
      context.setTransform(1,0,0,1,0,0); // reset to identity

      //translate the canvas origin to the center of the player
      context.translate(x+.5*width,y+.5*height);
      context.rotate(angleInRadians);

      //drawShip

      context.strokeStyle = '#ffffff';
      context.beginPath();

      //hardcoding in locations
      context.moveTo(0,-10);
      context.lineTo(9,9);
      context.lineTo(0,-1);
      context.moveTo(-1,-1);
      context.lineTo(-10,9);
      context.lineTo(-1,-10);

      /*
      //using the width and height to calculate
      context.moveTo(10-.5*width,0-.5*height);
      context.lineTo(19-.5*width,19-.5*height);
      context.lineTo(10-.5*width,9-.5*height);
      context.moveTo(9-.5*width,9-.5*height);
      context.lineTo(0-.5*width,19-.5*height);
      context.lineTo(9-.5*width,0-.5*height);
      */

      context.stroke();
      context.closePath();

      //restore context
      context.restore(); //pop old state on to screen

      //add to rotation
      rotation++;

   }

Alpha Fading the Player Ship

When a new player ship in Geo Blaster Basic enters the game screen, we will have it fade from transparent to opaque. Example 8-7 shows how we will create this transformation in our game.

Using the context.globalAlpha attribute

To use the context.globalAlpha attribute of the canvas, we simply set it to a number between 0 and 1 before we draw the game graphics. We will create a new variable in our code called alpha, which will hold the current alpha value for our player ship. We will increase it by .01 until it reaches 1. When we actually create our game we will stop it at 1 and then start the game level. However, for this demo, we will just repeat it over and over.

Example 8-7. Alpha fading to the player ship

//canvasApp level variables
   var x = 50;
   var y = 50;
   var width = 20;
   var height = 20;
   var alpha = 0;
   context.globalAlpha  = 1;

   function drawScreen() {

      context.globalAlpha = 1;
      context.fillStyle = '#000000';
      context.fillRect(0, 0, 200, 200);
      context.fillStyle = '#ffffff';
      context.font = '20px _sans';
      context.textBaseline = 'top';
      context.fillText  ("Player Ship - alpha", 0, 180);
      context.globalAlpha = alpha;
      context.save(); //save current state in stack
      context.setTransform(1,0,0,1,0,0); // reset to identity

      //translate the canvas origin to the center of the player
      context.translate(x+.5*width,y+.5*height);

      //drawShip
      context.strokeStyle = '#ffffff';
      context.beginPath();

      //hardcoding in locations
      context.moveTo(0,-10);
      context.lineTo(9,9);
      context.lineTo(0,-1);
      context.moveTo(-1,-1);
      context.lineTo(-10,9);
      context.lineTo(-1,-10);

      context.stroke();
      context.closePath();

      //restore context
      context.restore(); //pop old state on to screen

      //add to rotation
      alpha+=.01;
      if (alpha > 1) {
      alpha=0;
      }
   }

The best content for your career. Discover unlimited learning on demand for around $1/day.