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> 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.
These tutorials are for those who have just started learning canvas and have little to no experience with it.
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.
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.
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.
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.
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.
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.
Ready for some intermediate level tutorials? These tutorials require some basic knowledge about canvas and JS which, I believe, you already have.
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.
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.
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.
Learn to make a basic 8-bit snake game in HTML5 Canvas. Also learn how to implement keyboard controls in games using basic jQuery.
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.
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:
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.
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.
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
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.