Every now and then a new technology releases giving better features and advantages over the previous ones but learning them all without spending a lot of time can be a pain. HTML5 <canvas> element is one of those technologies which is used to draw graphics, on the fly, on a web page via scripting (normally JavaScript). Learning <canvas> is not hard at all but due to a lack of good tutorials around the web makes it difficult to understand, specifically for newcomers.
So, I decided to collect the best canvas tutorials from around the web and share with you here. I also included some open source examples so that you can get a better learning experience and understanding by experimenting on the real things. The tutorials are categorized according to the difficulty levels, so if you are a beginner and new to <canvas>, then just see the beginner tutorials.
Also, please note that you must have the knowledge of basic JavaScript otherwise you won’t understand anything at all. If you don’t have any experience with JS, then checkout this great Codecast series on CSSDeck and navigate to the JavaScript section. After doing that, come back here and start experimenting with canvas like a boss.
What's the one thing every developer wants? More screens! Enhance your coding experience with an external monitor to increase screen real estate.
Beginner Level
These tutorials are for those who have just started learning canvas and have little to no experience with it.
1. Learning the basics of HTML5 canvas
This is a very good tutorial written by Rob Hawkes in which you’ll learn about almost everything related to canvas a beginner should know, Even I followed this tutorial when I was a very beginner just like you.
2. Canvas From Scratch
A four part series by Rob Hawkes published on net.tutsplus.com. It covers the basics of drawing, pixel manipulation, transformation and gradients, and also a nice introduction to canvas.
3. HTML5 Canvas Basic Tutorials Introduction
This website is a great source of Canvas tutorials ranging from beginner to intermediate level and also focusing on some advanced libraries / frameworks like KineticJS and ThreeJS.
4. Dive Into HTML5 – Canvas
The very basics of HTML5 Canvas explained here. The use of cartoons in the articles is absolutely amazing and makes the article interesting as well as fun to read. It covers all aspects from basic to advanced drawing, using gradients, rectangles, circles, arcs, etc.
5. 31 days of Canvas tutorials
A very nice resource by the creative code legend Keith Peters. Its a collection of 31 tutorials in which you’ll be made familiar with all the aspects of HTML5 Canvas.
It’s a great foundation into visual coding in JavaScript, and it’s great to see Keith adapting his techniques for HTML5 canvas.
6. Make a particle system in HTML5 canvas
A very nice interactive tutorial in which you will learn how to create a basic particle system where particles are made from circle shapes. The points covered in this tutorial are:
- Drawing circles and rectangles on canvas.
- Drawing radial gradients.
- Simple animation for particle movement.
Intermediate
Ready for some intermediate level tutorials? These tutorials require some basic knowledge about canvas and JS which, I believe, you already have.
7. Ping-Pong Game Tutorial with HTML5 Canvas and Sounds
In this tutorial (yes, its written by me), you will learn to create a simple ping pong game with sounds and other stuffs. I tried my best to make this tut beginner friendly but its always good to have some knowledge about physics and canvas before going to it.
8. Physics for Lazy Game Developers
This is a collection of simple and useful physics tutorials by Hunter for game developers who are just starting out and don’t want to waste time on doing simple physics like acceleration, rotation, collisions, etc. If your math is weak, then this is for you.
There’s also a couple of more interesting and complex examples. Make sure you check those out too.
9. Create a Game Character with HTML5 and JavaScript
A two part series by William Malone explaining how to convert a sketch into a working game character using JavaScript.
In Part 1 of this series we will design a game character from scratch. We will start with a drawing on paper and with the help of JavaScript we will create a breathing, blinking character on HTML5 canvas. Hopefully by the end of Part 1 you will have the tools and inspiration to create a character of your own.
10. Replicating ICS Phase Beam LWP Using Canvas
Its a two part series in which I will teach you how to replicate the ICS Phase Beam live wallpaper in HTML5 Canvas. I tried to make the tutorials beginners friendly but still, it will be better if you know the basics of canvas atleast.
11. Make a snake game using HTML5 canvas and Jquery
Learn to make a basic 8-bit snake game in HTML5 Canvas. Also learn how to implement keyboard controls in games using basic jQuery.
Advanced
This section is for those who are already very familiar with Canvas and JS, and just needs an idea to achieve something more advanced or complex. These also includes examples having short descriptions which will make you understand some new concepts and techniques quickly.
12. Burak Kanber’s Blog
Burak Kanber is an engineer and hence, knows physics very well. His blog contains some very good tutorials on advanced physics that will help you in creating difficult games or applications easily. Please note that the tutorials on his blog are not specific to canvas but can be implemented on it easily.
These are some of them that I found interesting:
- Modeling Physics in Javascript: Introduction
- Physics in Javascript: Car Suspension – Part 1 (Spring, Mass, Damper)
13. Image Nodes Example
A very cool experiment by Tim Holman in which interactive nodes are built from image data. You can play with it using your mouse. Checkout the code to learn how it was created.
14. Cool ASCII Animation using an Image Sprite, Canvas, and Javascript
In this lesson, HTML5 canvas is used to read the sprite’s pixel data which is then converted to grayscale. A character map is then derived from the pixels’ grayscale values and injected into the DOM making up the ascii art.
Finally Javascript is used to move the ascii version of the sprite in steps to create the animation.
15. Sinuous Game
A game built on the HTML5 Canvas element which will test your mouse pointer reflexes. The objective is to stay clear of the evil red dots and stay alive as long as possible. Even though the game play is linear sinusoidal and the graphics are minimalist it can get quite addictive.
Some more examples worth checking
Lets take a look at some examples that are worth checking out. Make sure you play with the code to get a better understanding of how things work here.
- Canvas Banner
- Doodle Jump using HTML5 Canvas
- Particles Emission based on mouse movements
- Particles Web Matrix
- Bakemono (Interactive Canvas Monster)
- Mouse Trails
Conclusion
This post contains the collection of some of the best canvas resources hand picked from around the web. I hope you become a canvas master soon with these tutorials and resources. If you are stuck anywhere or don’t know how to proceed then you can contact me or comment here and I will try to help you in the best way I can.
Hey, thanks for these tutorials! I’m an illustrator looking to make some compelling html5 widgets to drop into iBooks author and these tutorials have been VERY helpful!
Thanks for the list!
It helped me a lot to kickstart my canvas skills! I´m developing a little animation engine for my llama pet browsergame and your tut list was very useful for this 🙂
Greetings from germany!
Thanks for the list. I really appreciate it. A big hug from Argentina!
Check this impressive use of canvas as a full blown mixer control app
http://www.soundcraft.com/ui-demo/mixer.html