You are previewing Canvas Cookbook.
O'Reilly logo
Canvas Cookbook

Book Description

Over 80 simple but creative and structured recipes to explore the capabilities of HTML5 Canvas

About This Book

  • Develop simple to advanced recipes of your own, and ultimately produce a great application

  • Discover a better way to use HTML5 Canvas, JavaScript, and CSS

  • Put your creative instincts to use in your day-to-day interface developments

  • Who This Book Is For

    The book is intended for readers with a preliminary knowledge of JavaScript and CSS. Whether you're a beginner or expert in this technology, the book provides recipes to help you build your own application, presentation, or game.

    What You Will Learn

  • Draw basic shapes such as lines, arcs, curves, and text using the coordinate system

  • Learn about the animation cycle and use it to animate shapes

  • Grasp the knowledge required to create particles and use them

  • Give various effects to images and videos and also use them in animations

  • Discover the use of event listeners to make recipes interactive and to handle events through event handlers

  • Create good presentation graphics with graphs and charts

  • Learn all about 3D development, from building 3D objects to animating them

  • Convert your knowledge into a complete working game

  • Understand the interoperability and deployment of recipes on different browsers and on different devices

  • In Detail

    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.

    Style and approach

    All the recipes are sequential and cover the basic and advanced concepts of Canvas. Every recipe is as simple as possible without compromising creativity

    Downloading the example code for this book. You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the code file.

    Table of Contents

    1. Canvas Cookbook
      1. Table of Contents
      2. Canvas Cookbook
      3. Credits
      4. About the Author
      5. About the Reviewer
      6. www.PacktPub.com
        1. eBooks, discount offers, and more
          1. Why Subscribe?
      7. Preface
        1. What this book covers
        2. What you need for this book
        3. Who this book is for
        4. Sections
          1. How to do it…
          2. How it works…
          3. There's more…
        5. Conventions
        6. Reader feedback
        7. Customer support
          1. Downloading the example code
          2. Downloading the color images of this book
          3. Errata
          4. Piracy
          5. Questions
      8. 1. Paths and Text
        1. Introduction
        2. Drawing lines
          1. How to do it...
          2. How it works...
          3. There's more...
        3. Drawing horizontal, vertical, and assorted lines
          1. How to do it...
          2. How it works...
          3. There's more...
        4. Drawing joins
          1. How to do it...
          2. How it works...
        5. Drawing arc1
          1. How to do it...
          2. How it works...
          3. There's more...
        6. Drawing arc2
          1. How to do it...
          2. How it works...
          3. There's more...
        7. Drawing a quadratic curve
          1. How to do it...
          2. How it works...
          3. There's more...
        8. Drawing a rainbow
          1. How to do it...
          2. How it works...
        9. Drawing a Bezier curve
          1. How to do it...
          2. How it works...
        10. Drawing a flag
          1. How to do it...
          2. How it works...
        11. Drawing text
          1. How to do it...
          2. How it works...
          3. There's more...
        12. Drawing 3D text with shadows
          1. How to do it...
          2. How it works...
          3. There's more...
        13. Adding shadows to objects
          1. How to do it...
          2. How it works...
          3. There's more...
        14. Drawing a house
          1. How to do it...
          2. How it works...
      9. 2. Shapes and Composites
        1. Introduction
        2. Drawing rectangles
          1. How to do it…
          2. How it works...
        3. Drawing triangles
          1. How to do it…
          2. How it works...
          3. There's more...
        4. Drawing circles
          1. How to do it…
          2. How it works...
          3. There's more...
        5. Drawing gradients
          1. How to do it…
          2. How it works...
            1. Radial gradient
            2. Linear gradient
          3. There's more...
        6. Working with custom shapes and styles
          1. How to do it…
          2. How it works...
        7. Demonstrating translation, rotation, and scaling
          1. How to do it…
          2. How it works...
          3. There's more...
        8. Drawing an ellipse
          1. How to do it…
          2. How it works...
        9. Saving and restoring canvas state
          1. How to do it…
          2. How it works...
        10. Demonstrating composites
          1. How to do it…
          2. How it works...
        11. Drawing a mouse
          1. How to do it…
          2. How it works...
      10. 3. Animation
        1. Introduction
        2. Creating an animation class
        3. Demonstrating acceleration
          1. How to do it…
          2. How it works...
        4. Demonstrating gravity
          1. How to do it…
          2. How it works...
        5. Animating a line
          1. How to do it…
          2. How it works...
          3. There's more...
        6. Animating text
          1. How to do it…
          2. How it works...
          3. There's more...
        7. Animating a clock
          1. How to do it…
          2. How it works...
        8. Animating a solar system
          1. How to do it…
          2. How it works...
        9. Animating particles
          1. How to do it…
          2. How it works...
          3. There's more...
        10. Animating a particle fountain
          1. How to do it…
          2. How it works...
          3. There's more...
        11. Animating a rain effect
          1. How to do it…
          2. How it works...
          3. There's more...
        12. Animating a snow effect
          1. How to do it…
          2. How it works...
          3. There's more...
      11. 4. Images and Videos
        1. Introduction
        2. Drawing and cropping an image
          1. How to do it
          2. How it works...
        3. Rendering effects to images
          1. How to do it
          2. How it works...
        4. Drawing a mirror image
          1. How to do it
          2. How it works...
        5. Clipping a path
          1. How to do it
          2. How it works...
        6. Animated clipping
          1. How to do it
          2. How it works...
        7. Converting canvas to image and back to canvas
          1. How to do it
          2. How it works...
        8. Working with videos
          1. How to do it
          2. How it works...
        9. Rendering effects to videos
          1. How to do it
          2. How it works...
        10. Creating a pixelated image focus
          1. How to do it
          2. How it works...
      12. 5. Interactivity through Events
        1. Introduction
        2. Working with mouse coordinates
          1. How to do it
          2. How it works...
          3. There's more...
        3. Making a face smile
          1. How to do it
          2. How it works...
          3. There's more...
        4. Detecting a point in a path
          1. How to do it
          2. How it works...
          3. There's more...
        5. Simulating car movements
          1. How to do it
          2. How it works...
          3. There's more...
        6. Dragging and dropping
          1. How to do it
          2. How it works...
        7. Combining events and animation
          1. How to do it
          2. How it works...
          3. There's more...
        8. Demonstrating a touch event
          1. How to do it
          2. How it works...
      13. 6. Creating Graphs and Charts
        1. Introduction
        2. Drawing the axes
          1. How to do it…
          2. How it works...
          3. There's more...
        3. Drawing a simple equation
          1. How to do it…
          2. How it works...
          3. There's more...
        4. Drawing a sinusoidal wave
          1. How to do it…
          2. How it works...
        5. Drawing a line graph
          1. How to do it…
          2. How it works...
          3. There's more...
        6. Drawing a bar graph
          1. How to do it…
          2. How it works...
          3. There's more...
        7. Drawing a pie chart
          1. How to do it…
          2. How it works...
          3. There's more...
      14. 7. 3D Modeling
        1. Introduction
        2. Rendering 3D objects
          1. How to do it…
          2. How it works...
          3. There's more...
        3. Drawing 3D cubes
          1. How to do it…
          2. How it works...
          3. There's more...
        4. Drawing a 3D cylinder and a cone
          1. How to do it…
          2. How it works...
        5. Drawing a 3D sphere and a torus
          1. How to do it…
          2. How it works...
          3. There's more...
        6. Drawing 3D text decorated by particles
          1. How to do it…
          2. How it works...
          3. There's more...
        7. Drawing a panorama
          1. How to do it…
          2. How it works...
          3. There's more...
        8. Drawing a snowman
          1. How to do it…
          2. How it works...
          3. There's more...
      15. 8. Game Development
        1. Introduction
        2. Understanding the gaming states
          1. How to do it…
          2. How it works...
        3. Drawing on canvas
          1. How to do it…
          2. How it works...
          3. There's more...
        4. Playing some music
          1. How to do it…
          2. How it works...
          3. There's more...
        5. Using sprites from the sprite sheet
          1. How to do it…
          2. How it works...
          3. There's more...
        6. Demonstrating animation
          1. How to do it…
          2. How it works...
          3. There's more...
        7. Demonstrating collision
          1. How to do it…
          2. How it works...
          3. There's more...
        8. Demonstrating physics
          1. How to do it…
          2. How it works...
          3. There's more...
        9. Game 1 – Fruit Basket
          1. How to do it…
          2. How it works...
          3. There's more...
        10. Game 2 – Catapult
          1. How to do it…
          2. How it works...
          3. There's more...
      16. 9. Interoperability and Deployment
        1. Introduction
        2. Understanding interoperability
        3. Styling text and background using CSS
          1. How to do it
          2. How it works...
          3. There's more...
        4. Deploying a game on Android mobile
          1. How to do it
          2. How it works...
          3. There's more...
      17. Index