Tutorial hero
Lesson icon

Using the HTML5 Canvas Element in Sencha Touch: Part 1

Originally published December 11, 2014 Time 4 mins

The HTML5 Canvas element is one of the cooler things included in the HTML5 specification, it’s technically defined as:

a resolution-dependent bitmap canvas which can be used for rendering graphs, game graphics, or other visual images on the fly.

…or basically an area where you can draw things with JavaScript. We can use different JavaScript methods to interact with the canvas:

1. fillRect allows us to draw a rectangle filled in with a colour:

ctx.fillRect(20, 20, 150, 100);

2. stroke will allow you to draw a path:

contextmoveTo(20, 20);
context.lineTo(20, 100);
context.lineTo(70, 100);
context.strokeStyle = 'red';

3. drawImage will draw an image onto the canvas:

var img = document.getElementById('josh');
context.drawImage(josh, 10, 10);

Before using these methods you must first get the context which returns an object with the methods that provide the ability to interact with the canvas:

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

Now we would be able to call methods like fillRect on context (context.fillRect()). For a full list of methods available (there are quite a few) take a look at the HTML5 Canvas Reference.

What can you do with the Canvas element?

‘Canvas’ is a very appropriate name. You should consider it like painting onto a real canvas, once you put something on there, it’s there for good – you can’t control it. You can’t for example create a rectangle and then get a reference to that rectangle and move it, you would have to redraw the rectangle completely.

People have done some really amazing things with this, take a look at these few examples:

Zen Photon Garden

Tearable Cloth

30,000 Particles

You can find some more mind-blowing canvas demos on David Walsh’s blog.

These really are impressive and show what HTML5 and the canvas element is capable of. We will be doing something much less ambitious though. What we’re looking to achieve will look a little more like this.

It wasn’t until recently that I first started getting my feet wet with the canvas element and I had a lot of fun. The experience made me want to try and incorporate it into a Sencha Touch mobile application. Sencha Touch is a HTML5 framework so naturally the canvas element is a perfect fit for it.

Let’s build a Sencha Touch canvas app together

So I decided to create a new blog post series where we would step through creating some kind of drawing application in Sencha Touch. I’d like to keep this as fluid as possible and take suggestions as I go, but for now the general approach will be something like this:

  1. Users will be able to draw with multiple colors and tools onto a HTML5 canvas element
  2. Users will be able to save the image they created to their device.

and also possibly:

3. Users will be able to import a photo from their photo library and edit it.

These functions may change or be added to over the course of the series, but hopefully we end up with something cool. If it’s any good I’ll put it up on the App Store for free and will also provide a download for the source code at the end (whether it is good or bad).

Help me come up with a name!

If you have any suggestions on what you’d like to see built in this application let me know in the comments. I really need help with the name though, the most creative thing I can come up with is “Simple Draw”.

Click here for Part 2

Learn to build modern Angular apps with my course