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.

HTML5 - Mastering the Canvas Element (III) - Drawing basic shapes

Finally after all the boring stuff we're ready to start drawing stuff on our screen. In this tutorial, we'll learn to use the canvas API from JavaScript and draw shapes. I'll also give you an insight on contexts!

So, let's jump right in...

HTML5 - Mastering the Canvas Element (II) - Coordinate System

In the previous tutorial we learned about the canvas element itself, but we really can't do any fancy artwork on our canvas until we know about its coordinate system.

So, in this post, we'll discuss the coordinate system of the canvas and see how it's different from the one you learned in math class.

HTML5 - Mastering the Canvas Element (I)

Well, in the recent past, I've got a lot of messages from readers like you saying that they found the canvas drawing app tutorial series really interesting and would like to build their own drawing apps, but they are complete beginners in using the canvas element.

So, if you're one of those guys, you're in for a treat, because I've decided to build a tutorial series for people like you teaching you to use canvas from scratch!

Building a drawing app with HTML5's canvas (Part 6)

In this part of the tutorial series, we complete our canvas drawing app by adding a save button to our control bar on top that will let the user save the image to their disk.

Initially I thought about making it such that we can store the image on our servers but then I decided not to get into the server side part of it as we've always focused on the front-end...

Building a drawing app with HTML5's canvas (Part 5)

In the previous post with out drawing app series I announced that we'll build functionality to pick colours from a palette. So, in this post, we'll try doing it!

Building a drawing app with HTML5's canvas (Part 4)

In this part of the series, we'll build a little radius indicator and two buttons to increase and decrease the value of our radius variable which effectively is increasing or decreasing our brush size.

Building a drawing app with HTML5's canvas- Connecting the dots (Part 3)

In the previous post, we noticed that if we moved the mouse too fast, the dots would be separated. This is probably not the functionality that we want for our app. In this post, we'll fix that and then we'll be able to draw smooth lines.

Building a drawing app with HTML5's canvas (Part 2)

In the previous part of this series, we learned to build an app that puts a point on the screen each time it is clicked. In this part, we'll extend that functionality to start drawing points when the mouse is dragged on the screen.

However, for this, we'll have to get rid of the event listener we wrote in the previous post and add new ones.

Also, the browsers don't provide event listeners for mouse drag, so we'll have to build it ourselves...

Building a drawing app with HTML5's canvas (Part 1)

In the previous post, we learned to use the arc function in the canvas API for HTML5. If you haven't, please go ahead and read the article, because it's going to be really useful for this tutorial series on building a drawing app for web browsers. Which obviously can be converted to an android app using the technique mentioned in one of our old posts.

So, in this post, we'll just introduce the project and start with the project to build a basic version of our drawing app.

HTML5- Canvas' arc( ) Method (Explained)

In this blog post, I've explained the arc() method of the HTML5's canvas feature. Well, I decided to do this because I was going to build a little drawing app using HTML5's canvas as a tutorial series. However, I realized that it was nearly impossible to explain the meat of the series without understanding the arc() function properly, hence I decided to do a standalone tutorial on arc() method...