If you asked me a year ago if I could imagine myself writing a book, I'd probably have said no. Yet here I am as the author of one of just a handful of books on HTML5 canvas. My aim has been to create the book that I wished existed two years ago when I first started to learn about canvas. Back then there were barely any resources on canvas. Fortunately that has now started to change for the better.
Over those past two years, I've spent much of my time experimenting with canvas and other new Web technologies that are only just starting to see the light of day. These experiments range from recreating the interactive Google balls logo in September 2010, to creating a fully-fledged multiplayer game with HTML5 canvas and WebSockets. It is these experiments that armed me with the knowledge and experience to write this book and to teach others the lessons I've learned.
I'm absolutely fascinated by animation and games development with technologies like canvas and JavaScript. I truly hope that this book gets across some of that enthusiasm, and I hope that it helps you on your journey to becoming a master of HTML5 canvas.
Foundation HTML5 Canvas has been written in a friendly way that makes it approachable to beginners and experts alike. It is predominantly for Web designers who are new to HTML5 and JavaScript, and covers the absolute basics of creating interactive games and applications using the HTML5 canvas element. Experienced Web designers and programmers will also learn about all the features of canvas and how to use them in their own projects. Flash and Silverlight developers wanting to broaden their reach across the Web and mobile devices will also benefit from the information in this book.
The book starts off with a short introduction, easing you into HTML5 and the awesome new functionality that it brings to the Web. The purpose of this first chapter is to arm you with the necessary background knowledge about HTML5 and the surrounding technologies.
Once the basics of HTML5 are sorted, you'll move on to learning all about JavaScript. The purpose of this second chapter is to teach you everything you'll need to know to start utilizing HTML5 canvas and creating amazing animations and games with it.
Chapter 3 is where you're properly acquainted with the canvas element, learning how to utilize it to draw basic shapes and text. It is at this point I hope that you will begin to fall in love with canvas and its simplicity.
Next up is Chapter 4, where you're introduced to the more advanced functionality of canvas. You'll learn how to perform transformations as well as how to draw complex shapes. You'll also learn how to save drawings in the canvas as images.
Chapter 5 takes the knowledge from previous chapters and uses it to let you manipulate images and video with canvas. This is where things start to get really interesting, and it is where I hope you'll start to really see the practical uses of canvas.
The following chapters, 6 and 7, step up a gear and teach you how to animate with JavaScript and canvas. It is in these chapters that you'll learn the fundamentals of animation, as well as how to use physics to make your animations look realistic.
Chapters 8 and 9 are the culmination of the book. These two chapters each walk you through the creation of an HTML5 game, from the core aspects of creating a game with canvas, to user input, to adding sound with HTML5 audio. Everything you learn in these chapters will be useful to the creation of your own HTML5 games.
The book ends with a look at the future of canvas and how you can take things further. This final chapter will hopefully inspire you to take everything that you've learned and really push it to another level.
I've tried to keep this book structured so that you can read it from front to back, or jump in and read about just a specific topic. The purpose of this book is to act as a learning resource, as well as a point of reference for working with canvas and animation in JavaScript.
All the code for this book can be downloaded from the book's page on the friends of ED website [http://www.friendsofed.com].