(click anywhere to close)

Guide to (HTML5) Canvas

category: Website | course: Canvas | difficulty:
1. Table of Contents

When HTML5 came around the corner, a new and very powerful element was introduced. I’m talking about the <canvas> element, which does exactly what you’d expect: create an empty canvas within a webpage, for you to paint your pretty pictures on. The element itself, just like the rest of HTML, doesn’t have any complexity to it; all you need to do is type it, and your canvas is ready to be used. To do anything meaningful with it, though, JavaScript is used. JavaScript has lots of objects and methods designed specifically for the canvas, and those are what this course will teach you. Therefore, before you start, make sure you know the basics of HTML and JavaScript. The first chapter will take you by the hand and remind you of everything, but I subsequently keep the examples clean and simple.

Because JavaScript is used to create, draw and modify the canvas, there’s a lot more to it than just creating a picture. For example, the main use of the canvas is for creating games right in your web browser. This course will not really focus on that particular aspect, but I just wanted to tell you what you could use all this information for.

Have fun!

Table of Contents

  1. The canvas Element
  2. Paths
  3. Lines & Curves
  4. Stroke Styles
  5. Shapes
  6. Fill Styles
  7. Text
  8. Transformations
  9. Images
  10. Composites
  11. Animation


No previous post :( [Canvas] The canvas Element
Do you like my tutorials?
To keep this site running, donate some motivational food!
Chocolate Milk