Book Image

Canvas Cookbook

Book Image

Canvas Cookbook

Overview of this book

With the growing popularity of HTML5 Canvas, this book offers tailored recipes to help you develop portable applications, presentations, and games. The recipes are simple yet creative and build on each other. At every step, the book inspires the reader to develop his/her own recipe. From basic to advanced, every aspect of Canvas API has been covered to guide readers to develop their own application, presentation, or game.
Table of Contents (16 chapters)
Canvas Cookbook
Credits
About the Author
About the Reviewer
www.PacktPub.com
Preface
Index

Index

A

  • acceleration
    • demonstrating / Demonstrating acceleration, How to do it…
    • working / How it works...
  • addColorStop() method / How it works...
  • Android mobile
    • game, deploying on / Deploying a game on Android mobile, How to do it, How it works...
  • animate() function / How it works...
  • animated clipping
    • about / Animated clipping
    • working / How it works...
  • animation
    • combining, with events / Combining events and animation, How to do it, How it works..., There's more...
    • demonstrating / Demonstrating animation, How it works...
  • animation class
    • creating / Creating an animation class
  • API documentation
    • reference link / Introduction
  • arc1
    • drawing / Drawing arc1, How it works..., There's more...
  • arc2
    • drawing / Drawing arc2, How it works..., There's more...
  • assorted lines
    • drawing / Drawing horizontal, vertical, and assorted lines, How to do it..., How it works...
  • axes
    • drawing / Drawing the axes, How to do it…

B

  • bar graph
    • drawing / Drawing a bar graph, How to do it…, How it works...
  • Bezier curve
    • drawing / Drawing a Bezier curve, How to do it..., How it works...
  • butt value / How it works...

C

  • canvas
    • converting, to image / Converting canvas to image and back to canvas, How to do it, How it works...
    • drawing on / Drawing on canvas, How to do it…, How it works...
  • canvas API
    • functions / How it works...
  • canvas state
    • saving / Saving and restoring canvas state, How to do it…, How it works...
    • restoring / Saving and restoring canvas state, How to do it…, How it works...
  • car movements
    • simulating / Simulating car movements, How to do it, How it works...
  • Cascaded Style Sheet (CSS) / Introduction
    • used, for styling text / Styling text and background using CSS, How to do it, How it works...
    • used, for styling background / Styling text and background using CSS, How to do it, How it works...
  • Catapult game
    • about / Game 2 – Catapult, How to do it…, How it works...
  • circles
    • drawing / Drawing circles, How to do it…, How it works...
  • clear() function / How it works...
  • clock
    • animating / Animating a clock, How to do it…, How it works...
  • collision
    • demonstrating / Demonstrating collision, How it works...
  • composites
    • demonstrating / Demonstrating composites, How to do it…, How it works...
  • composites operations
    • source-atop (S atop D) / Demonstrating composites
    • source-in (S in D) / Demonstrating composites
    • source-out (S out D) / Demonstrating composites
    • source-over (S over D, default) / Demonstrating composites
    • destination-atop (S atop D) / Demonstrating composites
    • destination-in (S in D) / Demonstrating composites
    • destination-out (S out D) / Demonstrating composites
    • destination-over (S over D) / Demonstrating composites
    • lighter (S plus D) / Demonstrating composites
    • xor (S xor D) / Demonstrating composites
    • copy (D is ignored / Demonstrating composites
  • cone
    • drawing / Drawing a 3D cylinder and a cone, How to do it…, How it works...
  • createLinearGradient method / How it works...
  • createRadialGradient method / How it works...
  • custom shapes and styles
    • working with / Working with custom shapes and styles, How to do it…, How it works...

D

  • 3D cubes
    • drawing / Drawing 3D cubes, How to do it…, How it works...
  • 3D cylinder
    • drawing / Drawing a 3D cylinder and a cone, How to do it…, How it works...
  • 3D objects
    • rendering / Rendering 3D objects, How to do it…, How it works...
  • 3D sphere
    • drawing / Drawing a 3D sphere and a torus, How to do it…, How it works...
  • 3D text, decorated by particles
    • drawing / Drawing 3D text decorated by particles, How to do it…, How it works...
  • 3D text, with shadows
    • drawing / Drawing 3D text with shadows, How to do it..., How it works..., There's more...
  • drag
    • about / Dragging and dropping, How to do it
    • handling / How it works...
  • drawLine() function / How it works...
  • drawTriangle() method / How it works...
  • drop
    • handling / Dragging and dropping, How to do it, How it works...

E

  • effects
    • rendering, to image / Rendering effects to images, How to do it, How it works...
    • rendering, to videos / Rendering effects to videos, How to do it, How it works...
  • ellipse
    • drawing / Drawing an ellipse, How to do it…, How it works...
  • events
    • combining, with animation / Combining events and animation, How to do it, How it works..., There's more...

F

  • flag
    • drawing / Drawing a flag, How it works...
  • frames per second (FPS) / Creating an animation class
  • Fruit Basket game
    • about / Game 1 – Fruit Basket, How to do it…, How it works...

G

  • game
    • deploying, on Android mobile / Deploying a game on Android mobile, How to do it, How it works...
  • gaming states
    • about / Understanding the gaming states
    • working / How it works...
  • gradients
    • drawing / Drawing gradients, How it works...
    • radial gradient / Radial gradient
    • linear gradient / Linear gradient
  • gravity
    • demonstrating / Demonstrating gravity, How to do it…, How it works...

H

  • horizontal lines
    • drawing / Drawing horizontal, vertical, and assorted lines, How to do it..., How it works...
  • house
    • drawing / Drawing a house, How it works...

I

  • image
    • drawing / Drawing and cropping an image, How it works...
    • cropping / Drawing and cropping an image, How it works...
    • effects, rendering / Rendering effects to images, How to do it, How it works...
    • converting, to canvas / Converting canvas to image and back to canvas, How to do it, How it works...
  • init() function / How it works...
  • interoperability
    • about / Understanding interoperability

J

  • joins
    • drawing / Drawing joins, How to do it..., How it works...

L

  • line
    • animating / Animating a line, How to do it…, How it works..., There's more...
  • line graph
    • drawing / Drawing a line graph, How to do it…, How it works...
  • lines
    • drawing / Drawing lines, How to do it..., How it works...

M

  • mirror image
    • drawing / Drawing a mirror image, How to do it, How it works...
  • mouse
    • drawing / Drawing a mouse, How to do it…, How it works...
  • mouse coordinates
    • working with / Working with mouse coordinates, How to do it, How it works...
  • mouse event
    • handling, example / Making a face smile, How to do it, How it works...
  • music
    • playing / Playing some music, How it works...

O

  • objects
    • shadows, adding / Adding shadows to objects, How it works..., There's more...

P

  • panorama
    • drawing / Drawing a panorama, How to do it…, How it works...
  • particle fountain
    • animating / Animating a particle fountain, How to do it…, How it works...
  • particles
    • animating / Animating particles, How to do it…, How it works...
  • path
    • clipping / Clipping a path, How to do it, How it works...
  • Phaser 2.4.4
    • reference link / Introduction, How it works...
    • about / Introduction
  • physics
    • demonstrating / Demonstrating physics, How to do it…, How it works...
  • pie chart
    • drawing / Drawing a pie chart, How to do it…, How it works...
  • pixelation / How it works...
  • point
    • detecting, in path / Detecting a point in a path, How to do it, How it works...

Q

  • quadratic curve
    • drawing / Drawing a quadratic curve, How it works...

R

  • radians / Drawing arc2
  • rainbow
    • drawing / Drawing a rainbow, How to do it..., How it works...
  • rain effect
    • animating / Animating a rain effect, How to do it…, How it works...
  • rectangles
    • drawing / Drawing rectangles, How to do it…, How it works...
  • reqAnimFrame() function / How it works...
  • rgb method / How it works...
  • rotation
    • demonstrating / Demonstrating translation, rotation, and scaling
  • round value / How it works...

S

  • scaling
    • demonstrating / Demonstrating translation, rotation, and scaling, How to do it…, How it works...
  • shadowBlur property / How it works...
  • shadowColor property / How it works...
  • shadowOffsetX property / How it works...
  • shadowOffsetY property / How it works...
  • shadows
    • adding, to objects / Adding shadows to objects, How it works..., There's more...
  • simple equation
    • drawing / Drawing a simple equation, How to do it…, How it works...
  • sinusoidal wave
    • drawing / Drawing a sinusoidal wave, How to do it…, How it works...
  • snow effect
    • animating / Animating a snow effect, How to do it…, How it works..., There's more...
  • snowman
    • drawing / Drawing a snowman, How to do it…, How it works...
  • solar system
    • animating / Animating a solar system, How to do it…, How it works...
  • sprite sheet
    • sprites, using / Using sprites from the sprite sheet, How to do it…, How it works..., There's more...
  • square value / How it works...

T

  • text
    • drawing / Drawing text, How to do it..., How it works...
    • animating / Animating text, How to do it…, How it works...
  • torus
    • drawing / Drawing a 3D sphere and a torus, How to do it…, How it works...
  • touch event
    • demonstrating / Demonstrating a touch event, How to do it, How it works...
  • translation
    • demonstrating / Demonstrating translation, rotation, and scaling
  • triangles
    • drawing / Drawing triangles, How to do it…, How it works...

U

  • updateLine() function / How it works...

V

  • vertical lines
    • drawing / Drawing horizontal, vertical, and assorted lines, How to do it..., How it works...
  • videos
    • working with / Working with videos, How it works...

W

  • WebGL / Understanding interoperability