Firstly, I’d like to point out that elements drawn in the canvas are not part of the DOM and therefore cannot be bound to events. If you want your elements to respond to events, I would suggest using SVG instead.

Ok so we have that out of the way.

I’ll be using some examples to help illustrate how canvas works during this article.

 <canvas id="myCanvas" width="400px" height="400px"></canvas>

The first thing to understand about canvas is that you don’t actually draw on the canvas element itself, but rather a canvas “context” which the javascript API provides. The context is basically a drawing stack that holds all of our drawings. So let’s go ahead and define the context.

var canvas2D = document.getElementsById('myCanvas').getContext('2d')

At the moment we’re limited to a 2D context. From now on, when we want to interact with the contents of the canvas, we’re going to be calling methods on ‘canvas2D’, a full list of which can be seen here.

So let’s get started by drawing a rectangle. To do so we’re going to use the fillRect method which is defined in the spec like so.

void fillRect(double x, double y, double w, double h);

which means all we need to do is specify the x and y co-ordinates for the top left corner as well as its dimensions (width and height). Like so:

context2D.fillRect(15,15,100,200)

which will make a rectangle 15px in from the top and left edges and it will be 200px high and 100px across. Simple.

Fig1. Rectangle

By default it looks pretty boring right? right! If you don’t specify any styles, the defaults are black. To define styles we can use fillStyle to pick the fill colour and strokeStyle for the stroke. Let’s give it a go:

context2D.fillStyle = 'pink';
context2D.strokeStyle = 'green';
context2D.fillRect(15,15,100,200);
context2D.strokeRect(15,15,100,200);

Fig2. Coloured Rectangle

Much better!

What if we wanted more rectangles but we wanted to change the colour?

Well thankfully this is just as simple, though takes some getting used to. Remember that stack I mentioned earlier? Well this is where it really comes in to play. To achieve something like Fig3. we have to manipulate the layers of the stack.

So if we want to make a pink rectangle, a green rectangle, then a pink one again, we’d do something like:

• Define the style for the pink rectangle
• Draw the pink rectangle
• Save our state (remember the place in the stack)
• Define our green rectangle
• Draw the green rectangle
• Now rather than redefining that pink rectangle, we’re just going to grab the state from before.
• Draw the pink rectangle

Like so:

context2D.fillStyle = 'pink';
context2D.fillRect(15,15,100,200);
context2D.save();

context2D.fillStyle = 'green';
context2D.fillRect(130,15,100,200);

context2D.restore();
context2D.fillRect(245,15,100,200);

Fig3. Using state

Using the save and restore methods, we push and pop the current state onto our canvas stack, so there’s no need to redefine an old state if you have already saved it.

I hope you’ve enjoyed this very brief scratch-on-the-surface look at canvas. In the next few posts I’ll be looking at more advanced methods such as rotation line drawing and curves as well as image/pixel manipulation so stay tuned.

-Dan.

So let’s get started!

1. Trigger and Listen
   To start things off we’ll need to tell our browser when to send a request . This can be as simple as adding a listener that listens for a button’s click event.
2. Collect our data
   Most of the time, AJAX is used to submit a form so at this point, it’s a good time to collect each field’s value and prepare something to send to the server. This can take many forms, depending on how your server handles  incoming requests. The most common way however is just to build a query string and tack it onto to the end of the URL you want to send your AJAX request to. If your server is set up to accept JSON, you could do that too.
3. Make the request
   Now that we have everything we need, we can send our request! Our request should include the data we just collected as well as a HTTP verb that describes the action we’re taking (GET or POST, if you’re making a change to a the database, it will most likely be POST) that way your server will know how to handle the request. If you sent data using a query string, you will be able to access it with PHP using the global $_POST variable.
4. Providing feedback
   So now the request has been made, that’s all yes? No. We now need tell our user that what they have done has succeeded or failed. Luckily our server responds with a success or failure message that we can listen for and provide the appropriate feedback, such as a success flash message or whatever fits in your UX guidelines.

Not so hard after all! And this is about as complicated as it gets, you can listen for other events such as drag and drop, and send whatever data you want to your server, but this is just a basic illustration of how to get started. I wish you all the best and if you have any questions please ask away!

Further Reading:

jQuery’s .ajax() method - provides a method to easily send a request to the server and react to success/error results.

Dojo’s .xhr methods and utilities - provides a much more detailed set of methods than jQuery, but essentially does the same thing – lets you easily build robust AJAX interactions.

You can check out the Demo here or keep on reading to pick up “teh codes”.

1. The Setup!

Grab yourself a div, any div and let’s give it some basic properties:

#background-thing{
  background: url(http://www.dnitza.com/experiments/fullscreen-pan/stairway.jpg) no-repeat 0 0 scroll;
  background-size: cover;
  height: auto;
  left: 0;
  min-height: 100%;
  min-width: 1024px;
  overflow: hidden;
  position: fixed;
  top: 0;
  width: 100%;
}

2. Make some magic of the javascript variety

Don’t forget to include jQuery.

$(document).ready(function(){
$('#background-thing').mousemove(function(e){
  var mousePos = (e.pageX/$(window).width())*100;
  $('#background-thing').css('backgroundPosition', mousePos+'% 0');
});
});

And voila! A nifty panning background image!

Using a NikonD3100 with the stock 18-55mm lens.

@mixin linear-gradient($top, $bottom, $base){
    background-image: -webkit-gradient(linear, center top, center bottom, from($top), to($bottom));
    background-image: -moz-linear-gradient(top, $top, $bottom);
    background-image: -o-linear-gradient(top, $top, $bottom);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#{$top}", endColorstr="#{$bottom}");
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr="\"#{$top}\"", endColorstr="\"#{$bottom}\"")";
    background: linear-gradient(right top, $top, $bottom);
    background-color: $base;
}

EDIT 12/1/12: Updated with the new spec

Other sizes:

• 1920x1200px
• 1680x1050px
• 1440x900px
• 1280x800px