HTML5 - Mastering the Canvas Element (VIII) - Using images with canvas

Okay, after some grave violation of grammar and "drawing" text on your canvas, let's now talk about drawing images on the canvas element.

This can be really useful if you're building a game or something where you'll need to import images and animate them on your canvas.

HTML5 - Mastering the Canvas Element (VII) - Drawing Text (Seriously)

In this post, I would like to tell you that you can "draw" text on your canvas, without jeopardizing grammar.

In other words, I just mean you can display some text on the screen using some context methods.

HTML5 - Mastering the Canvas Element (VI) - Shadows

In this tutorial, we'll start talking about shadows and how to implement them for any shape. It's easy and difficult depending upon how you view it.

Now before you start, what if I told you? All shapes do have shadows by-default.

HTML5 - Mastering the Canvas Element (V) - Custom shapes aka Paths

In the previous tutorials we learned to build shapes like rectangles, circles etc. But really, we don't have all the power till we can virtually build any shape we want by just specifying the coordinates of the various points comprising the shape.

In this tutorial, we're going to learn to use paths. A really cool tool that canvases provide us with to build awesome cool graphics.

I've briefly covered it in one of my previous tutorial series' parts (the series was called Building a drawing app), connecting the dots.

HTML5 - Mastering the Canvas Element (IV) - Colours and Gradients!

Who doesn't like colour? If you noticed carefully, all of your drawings were plain black-n-white. In this tutorial, we learn to draw graphics with colour. From as simple as solid colours, to as complicated as gradients, we'll cover everything in this tutorial.

In the end, we'll also learn to use the erasing functionality of canvas.