HTML5 Canvas
Native Interactivity and Animation for the Web
Publisher: O'Reilly Media
Final Release Date: May 2011
Pages: 654

No matter what platform or tools you use, the HTML5 revolution will soon change the way you build web applications, if it hasn't already. HTML5 is jam-packed with features, and there's a lot to learn. This book gets you started with the Canvas element, perhaps HTML5's most exciting feature. Learn how to build interactive multimedia applications using this element to draw, render text, manipulate images, and create animation.

Whether you currently use Flash, Silverlight, or just HTML and JavaScript, you'll quickly pick up the basics. Practical examples show you how to create various games and entertainment applications with Canvas as you learn. Gain valuable experience with HTML5, and discover why leading application developers rave about this specification as the future of truly innovative web development.

  • Create and modify 2D drawings, text, and bitmap images
  • Incorporate and manipulate video, and add audio
  • Build a basic framework for creating a variety of games on Canvas
  • Use bitmaps and tile sheets to develop animated game graphics
  • Go mobile: port Canvas applications to iPhone with PhoneGap
  • Explore ways to use Canvas for 3D and multiplayer game applications
Table of Contents
Product Details
About the Author
Colophon
Recommended for You
Customer Reviews

REVIEW SNAPSHOT®

by PowerReviews
O'Reilly MediaHTML5 Canvas
 
4.5

(based on 6 reviews)

Ratings Distribution

  • 5 Stars

     

    (3)

  • 4 Stars

     

    (3)

  • 3 Stars

     

    (0)

  • 2 Stars

     

    (0)

  • 1 Stars

     

    (0)

100%

of respondents would recommend this to a friend.

Pros

  • Easy to understand (5)
  • Helpful examples (5)
  • Accurate (4)
  • Concise (4)
  • Well-written (4)

Cons

    Best Uses

    • Intermediate (4)
      • Reviewer Profile:
      • Developer (5)

    Reviewed by 6 customers

    Sort by

    Displaying reviews 1-6

    Back to top

    (2 of 2 customers found this review helpful)

     
    4.0

    One of my top 3 picks!

    By Patric Jonsson

    from Malmö, Sweden

    About Me Developer

    Verified Reviewer

    Pros

    • Concise
    • Easy to understand
    • Helpful examples
    • Well-written

    Cons

      Best Uses

        Comments about O'Reilly Media HTML5 Canvas:

        Introduction
        I was all excited when I received this book. I´ve been looking into Canvas briefly but not fully got my head around it. I'm originally a Flash developer with over 10 years of Actionscript programming experience, that has been embracing the transition to Canvas over the past six months.

        The Flash parts are in my experience beneficial when starting with Canvas. HTML5 Canvas offer lots of similarities but also many differences. This book describes those differences very well and in a manner a flash developer easily can grasp.

        Content
        The book contains 628 pages of tips and tricks when working with Canvas. It´s mainly written with game development in mind, but the techniques described in the book do apply on other types of interactive experiences as well. In fact, I would buy this book only for having it as a reference to the mathematical formulas it´s describing!

        The first chapters walk you through the Canvas API, text, images, and drawing. The next few chapters deal with math and physics, video, audio, games and mobile. The last chapter introduces the reader to 3D with WebGL and multiplayer.

        Every section includes demos and a well-organized walk through of the code, and the routines used are repeated so you can understand the flexibility of the code.

        Tone of voice
        I really appreciate how the authors make use of a simple language (for a non-native English speaking person like me). Without being all too humoristic or too earnest, even the more complex topics are easy to understand.

        Conclusion
        HTML5 Canvas is a great resource when transitioning from the Flash platform. But even if you haven´t been working with Flash and Actionscript, I think this book is a good start to learning about Canvas. If you are completely new to programming you might find it hard to grasp all the programmatic terms and examples.

        I have read quite a few tech books throughout the years and this one is definitely one of my top 3 picks in terms of structural arrangement and the ease of understanding the concepts described.

        I would have liked to give this book top score, but the fact that it is game-focused, brings it down a notch. I would have preferred to see the techniques described in other contexts as well.

        All in all, I totally recommend it to anyone interested of learning about the HTML5 Canvas element.

        Follow me on Twitter: http://twitter.com/flashpatric
        Malmö, Sweden, April 5th 2012

        (1 of 1 customers found this review helpful)

         
        4.0

        Great coverage of concepts

        By ockley

        from Copenhagen, Denmark

        About Me Designer, Developer, Educator

        Verified Reviewer

        Pros

        • Accurate
        • Concise
        • Helpful examples

        Cons

          Best Uses

          • Intermediate

          Comments about O'Reilly Media HTML5 Canvas:

          Introduction
          A lot of the hype around HTML5 and it's so-called "Flash killer"-ability evolves around the canvas element – an element that makes it possible to draw on a designated area of the HTML-document and update or interact with it via JavaScript.

          With the Flash Player abandoning the mobile browsers, this opens an immediate need for a technology, that satisfy the developers desire to create engaging content that goes beyond fading DOM-elements in or out of the page with jQuery – we are talking Physics, object collision and mouse interaction like we are used to on the Flash Platform. This is where the canvas element comes to the rescue, and this book tries to give you enough tools to work with the element.

          Tone of voice
          The book is precise and consistent in its tone of voice. It is not utterly humorously written, but is keeping a light and positive that makes most the more complex topics easier to swallow.

          Content
          It is topic based, and all the topics takes you through the main areas of the usage of the canvas element. It starts with simple topics and primitive examples on how to set up the canvas, and how to draw and render text on the elements.

          When that is all set, it takes on Physics and animation. Inspired by elder and well written routines from books like "Flash MX 2004 Game Programming", and "Flash Animation – making things move" (FriendsOfEd) they are converting the concepts, so the work in the JavaScript environment.

          After a throughout discussion on the other two main areas, where HTML5 is said to lift the Flash burden – video and audio – it goes into creating a game, and discusses many topics surrounding game development: Timers, transformation of elements, Game State Machine etc.

          Finally, there is a topic that shows how PhoneGap can be used to make programs, made with HTML and JavaScript, install and work as native Apps on the device. It also gives pointers for further exploration in WebGL (3D-environment) and working with ElectroServer.

          Conclusion
          For me, it is the first book on the HTML5 Canvas element I have ever read. As an experienced Flash Developer and well wandered in the world of JavaScript, I had no problem following the examples and extract the new knowledge presented in the book. However, this is not a book teaching you JavaScript. You may learn a lot of new JavaScript-stuff along the way, but there is little help when it comes to understanding of function, conditions and loops. Instead you are getting solid information about the do's and don'ts of Canvas-programming.

          It is not a beginners book, it's not a reference book, but for an intermediate programmer, you should have no problems at all. When it comes to the physics stuff and game logic, you may have to read it a few times to get your head around it.

          Kind Regards
          Karsten Vestergaard (ockley)

          (1 of 3 customers found this review helpful)

           
          5.0

          The next step in web programming

          By Ben Boarder

          from Melbourne, Australia

          About Me Designer, Developer

          Verified Reviewer

          Pros

          • Accurate
          • Concise
          • Easy to understand
          • Helpful examples
          • Well-written

          Cons

            Best Uses

            • Intermediate

            Comments about O'Reilly Media HTML5 Canvas:

            This is best place to start for the foundation in HTML5 canvas you'll need for the future.

            (1 of 3 customers found this review helpful)

             
            5.0

            HTML5 Canvas

            By Allan

            from Omaha, NE

            About Me Developer

            Verified Reviewer

            Pros

            • Accurate
            • Concise
            • Easy to understand
            • Helpful examples
            • Well-written

            Cons

              Best Uses

              • Expert
              • Intermediate

              Comments about O'Reilly Media HTML5 Canvas:

              I love this book it had very relevant information and awesome code examples.

              (4 of 5 customers found this review helpful)

               
              4.0

              Great for beginners

              By Gary

              from San Diego, CA

              Pros

              • Easy to understand
              • Examples

              Cons

              • Not a good reference book

              Best Uses

                Comments about O'Reilly Media HTML5 Canvas:

                This book covers the topic of the HTML5's canvas tag by covering a topic at a time with examples along the way. It starts with the basics of canvas and then starts covering topics such as drawing, text, images, as well as some simple examples of game building including topics such as physics. The examples build with the book and are always complete. Also, the source is available for the examples so you can run them even if you don't want to recreate them yourself.

                The book is very clear in covering the topics and should work well to teach someone new to canvas how to use it. I think someone already somewhat familiar with canvas, such as myself, does not get as much out of this book as the plethora of examples make getting to the content slower, and makes using the book as a reference more of a challenge. There was still useful content and the book did help grow my knowledge of the topic.

                (4 of 4 customers found this review helpful)

                 
                5.0

                HTML5 games and more

                By David

                from France

                About Me Developer, Sys Admin

                Verified Reviewer

                Pros

                • Accurate
                • Easy to understand
                • Helpful examples
                • Well-written

                Cons

                  Best Uses

                  • Expert
                  • Intermediate
                  • Student

                  Comments about O'Reilly Media HTML5 Canvas:

                  This book will teach you how to create HTML5 games and much more along the way. It is packed with lot on exemples on how to manipulate image, video and sound with javascript.
                  If you always wanted to do what Flash does without using Flash, this is the book you need to read.

                  Displaying reviews 1-6

                  Back to top

                   
                  Buy 2 Get 1 Free Free Shipping Guarantee
                  Buying Options
                  Immediate Access - Go Digital what's this?