Problem with Canvas Draw

I'm using javascript to draw brackets on the image of a car, it works fine when all that's on the page is a the canvas element but when I add anything else to the page (say a form), it refuses to stroke. tool.init_x and tool.final_y are all still set and work properly, just no line is being stroked.

if(window.addEventListener) {
    window.addEventListener('load', function () {
      var canvas, context, tool;

      function init () {
        // Find the canvas element.
        canvas = document.getElementById('imageView');
        if (!canvas) {
          alert('Error: I cannot find the canvas element!');
          return;
        }

        if (!canvas.getContext) {
          alert('Error: no canvas.getContext!');
          return;
        }

        // Get the 2D canvas context.
        context = canvas.getContext('2d');
        if (!context) {
          alert('Error: failed to getContext!');
          return;
        }

        // Pencil tool instance.
        tool = new tool_pencil();

        // Attach the mousedown, mousemove and mouseup event listeners.
        canvas.addEventListener('mousedown', ev_canvas, false);
        canvas.addEventListener('mousemove', ev_canvas, false);
        canvas.addEventListener('mouseup',   ev_canvas, false);
        context.strokeStyle = "#dd3c34";
        context.line = []
      }

      // This painting tool works like a drawing pencil which tracks the mouse 
      // movements.
      function tool_pencil () {
        var tool = this;
        this.started = false;

        // This is called when you start holding down the mouse button.
        // This starts the pencil drawing.
        this.mousedown = function (ev) {

            ev.preventDefault();

            context.beginPath();
            context.moveTo(ev._x, ev._y);
            tool.started = true;
            tool.init_x = ev._x;
            tool.init_y = ev._y;
        };

        // This function is called every time you move the mouse. Obviously, it only 
        // draws if the tool.started state is set to true (when you are holding down 
        // the mouse button).
        this.mousemove = function (ev) {

          ev.preventDefault();

          if (tool.started) {
            if ((ev._x-tool.init_x)>20 || (ev._x-tool.init_x)<(-20))
            {
                context.lineTo(ev._x, tool.init_y);
                context.stroke();

                tool.line_type = "horizontal"
            }
            else if ((ev._y-tool.init_y)>20 || (ev._y-tool.init_y)<(-20))
            {
                context.lineTo(tool.init_x, ev._y);
                context.stroke();

                tool.line_type = "vertical"
            }
          }
        };

        // This is called when you release the mouse button.
        this.mouseup = function (ev) {

          ev.preventDefault();

          if (tool.started) {
            tool.final开发者_JS百科_x = ev._x;
            tool.final_y = ev._y;

            tool.mousemove(ev);
            tool.started = false;


            //need to add the braces to the lines && store the lines in a json array
            var bracket_direction_number;

            if (tool.line_type == "horizontal")
            {
                if (tool.init_y > 70)
                {
                    bracket_direction_number = (-10);
                }
                else
                {
                    bracket_direction_number = 10;
                }

                context.beginPath(); //start the first side of the bracket
                context.moveTo(tool.init_x, tool.init_y); //move to the lines starting point
                context.lineTo(tool.init_x, (tool.init_y+bracket_direction_number)); //line to the starting point +10 on the y
                context.stroke();

                context.beginPath();
                context.moveTo(tool.final_x, tool.init_y); //move to the end point, init_y rather than final_y because init_y sticks to the line
                context.lineTo(tool.final_x, (tool.init_y+bracket_direction_number)); //add the bracket
                context.stroke();

                context.line.push({
                  'start' : { 'x' : tool.init_x, 'y' : tool.init_y },
                  'end' : { 'x' : tool.final_x, 'y' : tool.init_y }
                  });
            }
            else if (tool.line_type == "vertical")
            {
                if (tool.init_x > 150)
                {
                    bracket_direction_number = (-10);
                }
                else
                {
                    bracket_direction_number = 10;
                }

                context.beginPath();
                context.moveTo(tool.init_x, tool.init_y);
                context.lineTo((tool.init_x+bracket_direction_number), tool.init_y);
                context.stroke();

                context.beginPath();
                context.moveTo(tool.init_x, tool.final_y);
                context.lineTo(tool.init_x+bracket_direction_number, tool.final_y);
                context.stroke();

                context.line.push({ 'start' : { 'x' : tool.init_x, 'y' : tool.init_y }, 'end' : { 'x' : tool.init_x, 'y' : tool.final_y } });
            }
          }
        };
      }

      // The general-purpose event handler. This function just determines the mouse 
      // position relative to the canvas element.
      function ev_canvas (ev) {
        if (ev.layerX || ev.layerX == 0) { // Firefox
          ev._x = ev.layerX;
          ev._y = ev.layerY;
        } else if (ev.offsetX || ev.offsetX == 0) { // Opera
          ev._x = ev.offsetX;
          ev._y = ev.offsetY;
        }

        // Call the event handler of the tool.
        var func = tool[ev.type];
        if (func) {
          func(ev);
        }
      }

      init();

}, false); }

The problem was in ev.layerX and ev.layerY as they draw relative to the document as a whole rather than the canvas element, unless it is positioned. The solution was as simple as:

canvas
{
    position: relative;
}