I finally realized one night that while some people use Canvas, there are many others to which this is "over their head". That's okay, the manual can be daunting and has sparse examples. The Internet is full of examples, but no generally average tutorials that cover "the basics". As such, I don't really plan to go very in depth or stick specifically with one aspect or topic. I also won't cover some functions or properties of Canvas, if you want to read up more on them, the Mozilla Canvas Page is a great place to start. This tutorial does require a small understanding of Object Oriented programming, but nothing overly complex. This tutorial will not cover Text with Canvas, please see g6auc (Harry)'s wonderful add-on for that.

Okay, that was probably the worst intro I have written, ever, but let's get started.

Getting StartedEdit

Alright, first off, this tutorial will make use of a Color object that I wrote a while ago. It makes dealing with transparency and dynamically changing colors easy. You can get it here. Also, I will be using Radians for various Canvas commands. If you are more comfortable with using Degrees, then I offer the following conversion function:

Math.radian = function(degree) {
    return ((degree * Math.PI) / 180);

You can use it just like any other Math function: