canvas.html

<canvas id="drawn" height="608" width="810">
  <p>
    Your Browser Does Not Support HTML5 Please Upgrade for the sake of innovation
    <a href="http://www.google.com/chrome">Google Chrome</a>
    <a href="http://www.mozilla.com">FireFox</a>
    <a href="http://www.apple.com/safari">Safari</a>
    <a href="http://www.opera.com">Opera</a>
  </p>
</canvas>

canvas_spec.js

describe("Canvas", function() {
  loadFixtures("canvas.html");
  it("has a mouse down event attached", function() {
    expect($('#drawn')).toHandle('mousedown');
  });
});

script.js

(function() {
  var DEBUG, css_offset, down, eventMap, event_map, find_position, ghex, init, live_id, mouse_draw, sync, url;
  var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
  css_offset = {
    x: 1,
    y: 1
  };
  DEBUG = false;
  ghex = 0;
  url = 'test';
  down = false;
  sync = true;
  live_id = "live_slide";
  eventMap = {
    mousemove: "move",
    touchmove: "move",
    mousedown: "down",
    touchstart: "down",
    mouseup: "up",
    touchend: "up"
  };
  event_map = {
    mousemove: "move",
    touchmove: "move",
    mousedown: "down",
    touchstart: "down",
    mouseup: "up",
    touchend: "up"
  };
  find_position = function(obj) {
    var curleft, curtop;
    curleft = 0;
    curtop = 0;
    curleft = $(obj).offset().left - $(window).scrollLeft();
    curtop = $(obj).offset().top - $(window).scrollTop();
    return {
      x: curleft,
      y: curtop
    };
  };
  init = function() {
    var tool;
    canvas = $('#drawn').get(0);
// The code breaks at this line saying canvas is undefined
    c = canvas.getContext('2d');
    c.lineJoin = "round";
    c.lineCap = "round";
    c.strokeStyle = "#" + ghex;
    c.lineWidth = 1;
    tool = tools.pencil;
    return $('#container canvas').bind('mousedown mousemove mouseup', mouse_draw);
  };
  mouse_draw = function(e) {
    var func, position;
    position = find_position(this);
    e._x = e.clientX - position.x;
    e._y = e.clientY - position.y;
    func = tools.pencil[e.type];
    if (func != null) {
      return func(e);
    }
  };
  $(window).ready(__bind(function() {
    return init();
  }, this));
}).call(this);