A Gentle Introduction to Making HTML5 Canvas Interactive

this is an big overhaul of one of my tutorials on making and moving shapes on an html5 canvas. this new tutorial is vastly cleaner than my old one, but if you still want to see that one or are looking for the concept of a “ghost context” you can find that one here.

this tutorial will show you how to create a simple data structure for shapes on an html5 canvas and how to have them be selectable. the finished canvas will look like this:

this article’s code is written primarily to be easy to understand. we’ll be going over a few things that are essential to interactive apps such as games (drawing loop, hit testing), and in later tutorials i will probably turn this example into a small game of some kind. i will try to accommodate javascript beginners but this introduction does expect at least a rudimentary understanding of js. not every piece of code is explained in the text, but almost every piece of code is thoroughly commented!

the html5 canvas

a canvas is made by using the <canvas> tag in html:

   <canvas id="canvas" width="400" height="300">
    this text is displayed if your browser does not support html5 canvas.
   </canvas>

a canvas isn’t smart: it’s just a place for drawing pixels. if you ask it to draw something it will execute the drawing command and then immediately forget everything about what it has just drawn. this is sometimes referred to as an immediate drawing surface, as contrasted with svg as a retained drawing surface, since svg keeps a reference to everything drawn. because we have no such references, we have to keep track ourselves of all the things we want to draw (and re-draw) each frame.

canvas also has no built-in way of dealing with animation. if you want to make something you’ve drawn move, you have to clear the entire canvas and redraw all of the objects with one or more of them moved. and you have to do it often, of course, if you want a semblance of animation or motion.

so we’ll need to add:

1. code for keeping track of objects
2. code for keeping track of canvas state
3. code for mouse events
4. code for drawing the objects as they are made and move around

keeping track of what we draw

to keep things simple for this example we will start with a shape class to represent rectangular objects.

javascript doesn’t technically have classes, but that isn’t a problem because javascript programmers are very good at playing pretend. functionally (well, for our example) we are going to have a shape class and create shape instances with it. what we are really doing is defining a function named shape and adding functions to shape’s prototype. you can make new instances of the function shape and all instances will share the functions defined on shape’s prototype.

if you’ve never encountered prototypes in javascript before or if the above sounds confusing to you, i highly recommend reading crockford’s javascript: the good parts . the book is an intermediate overview of javascript that gives a good understanding of why programmers choose to create objects in different ways, why certain conventions are frowned upon, and just what makes javascript so different.

here’s our shape constructor and one of the two prototype methods, which are comparable to a class instance methods:

// constructor for shape objects to hold data for all drawn objects.
// for now they will just be defined as rectangles.
function shape(x, y, w, h, fill) {
  // this is a very simple and unsafe constructor. 
  // all we're doing is checking if the values exist.
  // "x || 0" just means "if there is a value for x, use that. otherwise use 0."
  this.x = x || 0;
  this.y = y || 0;
  this.w = w || 1;
  this.h = h || 1;
  this.fill = fill || '#aaaaaa';
}
 
// draws this shape to a given context
shape.prototype.draw = function(ctx) {
  ctx.fillstyle = this.fill;
  ctx.fillrect(this.x, this.y, this.w, this.h);
}

keeping track of canvas state

we’re going to have a second class/function called canvasstate. we’re only going to make one instance of this class and it will hold all of the state in this tutorial that is not associated with shapes themselves.

canvasstate is going to foremost need a reference to the canvas and a few other field for convenience. we’re also going to compute and save the border and padding (if there is any) so that we can get accurate mouse coordinates.

in the canvasstate constructor we will also have a collection of state relating to the objects on the canvas and the current status of dragging. we’ll make an array of shapes, a flag “dragging” that will be true while we are dragging, a field to keep track of which object is selected and a “valid” flag that will be set to false will cause the canvas to clear everything and redraw.

is going to need an array of shapes to keep track of whats been drawn so far.

i’m going to add a bunch of variables for keeping track of the drawing and mouse state. i already added boxes[] to keep track of each object, but we’ll also need a var for the canvas, the canvas’ 2d context (where wall drawing is done), whether the mouse is dragging, width/height of the canvas, and so on. we’ll also want to make a second canvas, for selection purposes, but i’ll talk about that later.

function canvasstate(canvas) {
 
  // ...
 
  // i removed some setup code to save space
  // see the full source at the end
 
 
  // **** keep track of state! ****
 
  this.valid = false; // when set to true, the canvas will redraw everything
  this.shapes = [];  // the collection of things to be drawn
  this.dragging = false; // keep track of when we are dragging
  // the current selected object.
  // in the future we could turn this into an array for multiple selection
  this.selection = null;
  this.dragoffx = 0; // see mousedown and mousemove events for explanation
  this.dragoffy = 0;

mouse events

we’ll add events for mousedown, mouseup, and mousemove that will control when an object starts and stops dragging. we’ll also disable the selectstart event, which stops double-clicking on canvas from accidentally selecting text on the page. finally we’ll add a double-click event that will create a new shape and add it to the canvasstate’s list of shapes.

the mousedown event begins by calling getmouse on our canvasstate to return the x and y position of the mouse. we then iterate through the list of shapes to see if any of them contain the mouse position. we go through them backwards because they are drawn forwards, and we want to select the one that appears topmost, so we must find the potential shape that was drawn last.

if we find the shape we save the offset, save that shape as our selection, set dragging to true and set the valid flag to false. already we’ve used most of our state! finally if we didn’t find any objects we need to see if there was a selection saved from last time. if there is we should clear it. since we clicked on nothing, we obviously didn’t click on the already-selected object! clearing the selection means we will have to clear the canvas and redraw everything without the selection ring, so we set the valid flag to false.

 
  // ...
  // (we are still in the canvasstate constructor)
 
  // this is an example of a closure!
  // right here "this" means the canvasstate. but we are making events on the canvas itself,
  // and when the events are fired on the canvas the variable "this" is going to mean the canvas!
  // since we still want to use this particular canvasstate in the events we have to save a reference to it.
  // this is our reference!
  var mystate = this;
 
  //fixes a problem where double clicking causes text to get selected on the canvas
  canvas.addeventlistener('selectstart', function(e) { e.preventdefault(); return false; }, false);
  // up, down, and move are for dragging
  canvas.addeventlistener('mousedown', function(e) {
    var mouse = mystate.getmouse(e);
    var mx = mouse.x;
    var my = mouse.y;
    var shapes = mystate.shapes;
    var l = shapes.length;
    for (var i = l-1; i >= 0; i--) {
      if (shapes[i].contains(mx, my)) {
        var mysel = shapes[i];
        // keep track of where in the object we clicked
        // so we can move it smoothly (see mousemove)
        mystate.dragoffx = mx - mysel.x;
        mystate.dragoffy = my - mysel.y;
        mystate.dragging = true;
        mystate.selection = mysel;
        mystate.valid = false;
        return;
      }
    }
    // havent returned means we have failed to select anything.
    // if there was an object selected, we deselect it
    if (mystate.selection) {
      mystate.selection = null;
      mystate.valid = false; // need to clear the old selection border
    }
  }, true);

the mousemove event checks to see if we have set the dragging flag to true. if we have it gets the current mouse positon and moves the selected object to that position, remembering the offset of where we were grabbing it. if the dragging flag is false the mousemove event does nothing.

  canvas.addeventlistener('mousemove', function(e) {
    if (mystate.dragging){
      var mouse = mystate.getmouse(e);
      // we don't want to drag the object by its top-left corner,
      // we want to drag from where we clicked.
      // thats why we saved the offset and use it here
      mystate.selection.x = mouse.x - mystate.dragoffx;
      mystate.selection.y = mouse.y - mystate.dragoffy;   
      mystate.valid = false; // something's dragging so we must redraw
    }
  }, true);

the mouseup event is simple, all it has to do is update the canvasstate so that we are no longer dragging! so once you lift the mouse, the mousemove event is back to doing nothing.

  canvas.addeventlistener('mouseup', function(e) {
    mystate.dragging = false;
  }, true);

the double click event we’ll use to add more shapes to our canvas. it calls addshape on the canvasstate with a new instance of shape. all addshape does is add the argument to the list of shapes in the canvasstate.

  // double click for making new shapes
  canvas.addeventlistener('dblclick', function(e) {
    var mouse = mystate.getmouse(e);
    mystate.addshape(new shape(mouse.x - 10, mouse.y - 10, 20, 20,
                               'rgba(0,255,0,.6)'));
  }, true);

there are a few options i implemented, what the selection ring looks like and how often we redraw. setinterval simply calls our canvasstate’s draw method. our interval of 30 means that we call the draw method every 30 milliseconds.

  // **** options! ****
 
  this.selectioncolor = '#cc0000';
  this.selectionwidth = 2;  
  this.interval = 30;
  setinterval(function() { mystate.draw(); }, mystate.interval);
}

drawing

now we’re set up to draw every 30 milliseconds, which will allow us to continuously update the canvas so it appears like the shapes we drag are smoothly moving around. however, drawing doesn’t just mean drawing the shapes over and over; we also have to clear the canvas on every draw. if we don’t clear it, dragging will look like the shape is making a solid line because none of the old shape-positions will go away.

because of this, we clear the entire canvas before each draw frame. this can get expensive, and we only want to draw if something has actually changed within our framework, which is why we have the “valid” flag in our canvasstate.

after everything is drawn the draw method will set the valid flag to true. then, ocne we do something like adding a new shape or trying to drag a shape, the state will get invalidated and draw() will clear, redraw all objects, and set the valid flag again.

// while draw is called as often as the interval variable demands,
// it only ever does something if the canvas gets invalidated by our code
canvasstate.prototype.draw = function() {
  // if our state is invalid, redraw and validate!
  if (!this.valid) {
    var ctx = this.ctx;
    var shapes = this.shapes;
    this.clear();
 
    // ** add stuff you want drawn in the background all the time here **
 
    // draw all shapes
    var l = shapes.length;
    for (var i = 0; i < l; i++) {
      var shape = shapes[i];
      // we can skip the drawing of elements that have moved off the screen:
      if (shape.x > this.width || shape.y > this.height ||
          shape.x + shape.w < 0 || shape.y + shape.h < 0) return;
      shapes[i].draw(ctx);
    }
 
    // draw selection
    // right now this is just a stroke along the edge of the selected shape
    if (this.selection != null) {
      ctx.strokestyle = this.selectioncolor;
      ctx.linewidth = this.selectionwidth;
      var mysel = this.selection;
      ctx.strokerect(mysel.x,mysel.y,mysel.w,mysel.h);
    }
 
    // ** add stuff you want drawn on top all the time here **
 
    this.valid = true;
  }
}

we go through all of shapes[] and draw each one in order. this will give the nice appearance of later shapes looking as if they are on top of earlier shapes. after all the shapes are drawn, a selection handle (if there is a selection) gets drawn around the shape that this.selection references.

if you wanted a background (like a city) or a foreground (like clouds), one way to add them is to put them before or after the main two drawing bits. there are often better ways though, like using multiple canvases or a css background-image, but we won’t go over that here.

getting mouse coordinates on canvas

getting good mouse coordinates is a little tricky on canvas. you could use offsetx/y and layerx/y, but layerx/y is deprecated in webkit (chrome and safari) and firefox does not have offsetx/y.

the most bulletproof way to get the correct mouse position is shown below. you have to walk up the tree adding the offsets together. then you must add any padding or border to the offset. finally, to fix coordinate problems when you have fixed-position elements on the page (like the wordpress admin bar or a stumbleupon bar) you must add the <html>’s offsettop and offsetleft.

then you simply subtract that offset from the e.pagex/y values and you’ll get perfect coordinates in almost every possible situation.

// creates an object with x and y defined,
// set to the mouse position relative to the state's canvas
// if you wanna be super-correct this can be tricky,
// we have to worry about padding and borders
canvasstate.prototype.getmouse = function(e) {
  var element = this.canvas, offsetx = 0, offsety = 0, mx, my;
 
  // compute the total offset
  if (element.offsetparent !== undefined) {
    do {
      offsetx += element.offsetleft;
      offsety += element.offsettop;
    } while ((element = element.offsetparent));
  }
 
  // add padding and border style widths to offset
  // also add the <html> offsets in case there's a position:fixed bar
  offsetx += this.stylepaddingleft + this.styleborderleft + this.htmlleft;
  offsety += this.stylepaddingtop + this.stylebordertop + this.htmltop;
 
  mx = e.pagex - offsetx;
  my = e.pagey - offsety;
 
  // we return a simple javascript object (a hash) with x and y defined
  return {x: mx, y: my};
}

there are a few little methods i added that are not shown, such as shape’s method to see if a point is inside its bounds. you can see and download the full demo source here .

now that we have a basic structure down, it is easy to write code that handles more complex shapes, like paths or images or video. rotation and scaling these things takes a bit more work, but is quite doable with the canvas and our selection method is already set up to deal with them.

if you would like to see this code enhanced in future posts (or have any fixes), let me know.

source: http://simonsarris.com/blog/510-making-html5-canvas-useful