Among all the new HTML5 elements is something truly unique: the canvas element.
This lets developers embed custom SVGs and even animate graphics in a web browser. You can do so much with the canvas element but it can be intimidating to learn.
That’s why I’ve collected the best books on canvas and browser graphics into this one post. You’ll find everything from JS-based animation to custom SVG icons for websites. If you’re a frontend developer looking to build better graphics I guarantee there’s a book in here made for you.
If you’re completely new to HTML5 canvas you’ll want a simple yet technical guide for development. I recommend HTML5 Canvas by O’Reilly because it’s lengthy and exhaustive. You’ll learn everything there is to know about HTML5 canvas elements and the writing style is easy to consume.
The 2D Canvas API is exceedingly complex when you get into the details. It’s possible to build custom browser games and visualizations all with a handful of code snippets.
Core HTML5 Canvas is a wonderful book written by developer David Geary. He has years of experience working in JavaScript graphics and other programming languages, but his teaching style is what really sells this book.
Over the course of 750 pages you’ll learn about complex topics like custom graphics made for collisions, animations, and game sprites fixed on a time-based motion cycle. There are some introductory chapters explaining the basics of HTML5 canvas but these quickly move into practical real-world exercises.
All the exercises focus on game development whether it’s for realistic physics, image clipping, or game design for playable worlds.
If you’re looking for a simple intro to canvas then this is not your book.
However if you want to build custom browser-based games with canvas then everything you need to know can be found in these pages. Topics advance quickly though, so be sure you have some frontend dev experience before picking up this title.
O’Reilly has some of the best textbooks going and their 750-page book HTML5 Canvas is one of my personal favorites.
Currently in its second edition, this book takes you from the basics of canvas and SVGs all the way through construction for shapes and animations. You’ll learn how to alter properties like size, position, color, and even embed other items like images or text into the canvas.
You start with rough exercises that guide you through the canvas setup but eventually move into practical examples. You’ll learn how to graph movements, embed canvas video, and create sprite sheets for HTML5 gaming.
There’s almost no limit to what you can do with the canvas element. And major browser support just keeps growing. This book is the ultimate introduction for developers of all skill levels.
If you’re able to jump into a massive book without feeling overwhelmed then I’d highly recommend a copy of HTML5 Canvas regardless of your experience. This book has enough content to keep you entertained for months.
I don’t always recommend the “for dummies” books because they tend to vary in quality. But the teaching style is usually perfect for complete beginners which makes HTML5 Canvas For Dummies a fun read for newbies.
The author Don Cowan is a professional developer with experience on web and mobile apps. He talks about the future of web animation beyond Flash and how you can apply Canvas graphics to your current web projects.
Over the course of 384 pages you’ll learn the basics of HTML5 canvas and how these apply to modern web development. You’ll learn how to render basic shapes, how to animate them, and how to manage user inputs in a canvas element.
I would not recommend this as a technical guide to canvas. It does have a lot of source code and the examples are fantastic. But it reads like a smaller intro to HTML5 canvas with a focus on animation.
But if you’re fairly new to the world of frontend development this book is easy to read and offers a gentle guide to canvas development for the web.
If you want to delve right into HTML5 graphics with vectors and bezier curves take a peek at HTML5 Canvas: From Noob to Ninja. The author Kirupa Chinnathambi is actually the founder of Kirupa, a blog specializing in design tips & tutorials.
His book can literally take you from a complete newbie to a rather advanced user in just 300 pages. You start with the basics of a canvas element, how it works, and how you can write code built around canvas internals.
From there you’ll follow practice exercises that teach how to create squares, circles, custom text, and even custom animations. The final chapter explains how to handle user inputs like clicks from a mouse cursor.
The examples in this book are not as detailed as I expected. However Kirupa has years of experience writing awesome tutorials online, so his writing style is perfect for the absolute beginner.
If you want a quick book for building custom graphics with the canvas element then Kirupa’s Noob to Ninja guide is an awesome place to start.
Some web developers use canvas elements for icons, video players, or embedded effects on a webpage. But many devs use the canvas API for building playable games in a web browser.
Foundation HTML5 Canvas: For Games and Entertainment teaches the absolute basics of canvas elements through live examples. You’ll learn how to build three custom games from scratch working on top of the canvas API.
Earlier chapters start with the basics of canvas and eventually move into more detailed exercises. You’ll need a lot of JavaScript to keep up with these lessons. But the animation techniques in chapter 8 are some of the most advanced you can find in any book.
If you’re hoping to build custom web games with canvas then this book will not only get you started, but also help you build three custom games starting from scratch.
This is one of my favorite JS books solely for the level of detail and variety of content. Supercharged JavaScript Graphics covers the canvas element, basic SVGs, and custom animation with JavaScript libraries.
It starts off with an introduction to DHTML which then merges into modern development with jQuery and HTML5 canvas. The book spans 280 pages full of techniques for polyfills, animations, and custom graphics built through a number of different libraries.
This really focuses heavily on JavaScript and it’s one of the more sporadic books in regards to specific techniques. By the end you’ll have a well-rounded knowledgebase on web animation and you’ll become much more comfortable building custom web graphics from scratch.
If you already have some JS experience this book will be an uplifting resource. But if you’re still learning JavaScript you might struggle to work through this book alongside JS texts, though it’s possible if you can make enough time for practice.
Once you’re already familiar with HTML5 development you may find yourself looking for more. But there aren’t too many resources out there. Thankfully Pro HTML5 Games is one of the only books you need to push your skills beyond the basics.
This book spans 364 pages that teach HTML5 canvas gaming by example. You build a simple Angry Birds clone along with a real-time shooter game for the web. Both run on HTML5 canvas and JavaScript with a few other libraries added along the way.
But you’ll go far beyond the norm into more advanced topics like multiplayer gaming with Node/WebSocket. The author also shares basic tips for artificial intelligence to make the game enemies a little more fun.
Building a game on any platform is hard. Game programming for the web is very challenging, but it’s also a booming area with lots of opportunity.
If you already have some basic knowledge of canvas and JS game development this book can bring your skills up quite a few notches.
Last but not least we get to one of the newest and most useful books in this list. The Canvas Cookbook offers custom recipes for web animation, custom graphic FX, game sprites, data visualization, and even some 3D graphics with external JS libraries.
This cookbook isn’t a focused guide full of related tutorials. It’s a hodgepodge of 80+ different recipes for canvas developers who want to build lots of cool stuff on the canvas API.
You can jump around the recipes to pick and choose whatever catches your attention. Some focus on event listeners for user input while others offer code snippets for basic canvas game design. There’s so much to learn from this book and it makes an incredible desk reference.
Just be sure that you already understand the basics of HTML, JavaScript, and the canvas element before working through these recipes. They’re mostly targeted towards intermediate-to-advanced developers who just want to build awesome shit with canvas.
And in that regard the Canvas Cookbook succeeds with flying colors.
All of these books offer in-depth guides, tutorials, and exercises for web developers. Whether you’re building canvas graphics for games or web components you’re bound to find something in this list.
If you’re a complete beginner I recommend starting with the book HTML5 Canvas because it’s dense, easy to read, and follows a straightforward learning curve. But anyone with basic knowledge of frontend development can pick up any of these books and learn a lot in the process.
Alex is a fullstack developer with years of experience working in digital agencies and as a freelancer. He writes about educational resources and tools for programmers building the future of the web.
