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>
    <div id="error" class="hidden"></div>
</canvas>

canvas_spec.js

describe("Canvas", function() {
  beforeEach(function() {
    loadFixtures("canvas.html")
  });
  it("should hanlde mousedown events", function() {
    $("#drawn").canvasize()
    expect($("#drawn")).handle("mousedown");
  });
});

/// I also tried this test and it failed

describe("Canvas", function() {
  beforeEach(function() {
    loadFixtures("canvas.html")
  });
  it("should hanlde mousedown events", function() {
    $("#drawn").bind("mousedown" function() {})
    expect($("#drawn")).handle("mousedown");
  });
});

jquery.canvas.js.coffee

do ($ = jQuery) ->
  $.fn.canvasize = ->
    canvas = @.get(0).getContext('2d')
    canvas.lineJoin = "round";
    canvas.lineCap = "round";
    canvas.strokeStyle = "#000000";
    canvas.lineWidth = 10;

    find_position = (obj) ->
      curleft = 0
      curtop = 0
      curleft = $(obj).offset().left - $(window).scrollLeft()
      curtop = $(obj).offset().top - $(window).scrollTop();
      { x: curleft, y: curtop };

    mouse_draw = (e) ->
      position = find_position(@)
      e._x = e.clientX - position.x;
      e._y = e.clientY - position.y;
      func = tools.pencil[e.type];
      if func?
        func(e)

    @.bind('mousedown mousemove mouseup', mouse_draw);

    canvas