Question

I’m trying to implement a function as a part of a firefox add-on with canvas which gives the user the ability to draw.

function draw(event,context,drawit) {
var drawx = event.layerX;
var drawy = event.layerY;

if (!drawit) {
        context.beginPath();
        context.strokeStyle='rgb(0,255,0)';
        context.lineWidth=1;
        context.moveTo(drawx,drawy);
        drawit = true;
} else {
        context.lineTo(drawx,drawy);
        context.stroke();
}   

};

This works, but there seems to be a difference between the result of layerX/layerY and the line drawn. It’s only possible to draw in the upper left part of the canvas element. When the mouse pointer reaches about the half of the element the line doesn’t go further.

I already checked the position of the elements in Firebug and it seems ok: the canvas is inside a div-element and both have a defined width of 100%, while the drawing ends at about 50% of the element. It also works to set the values manually so that the line is also drawn in the right part of the canvas element.
Does anyone have an idea what is going wrong?

Answer 1

When the mouse pointer reaches about the half of the element the line doesn’t go further.

This could happen for a lot of reasons. Mis-translated context (from rotation/translation/scaling) and mismatched canvas size (what you wrote it as in html and what you’re considering it in code).

Are you certain that LayerX and LayerY are getting you the right mouse co-ordinates? What exactly do you mean by “difference” between layerx/y and whats drawn? Is there an offset? I ask because my mouse code is a bit more complex:

// Sets mx,my to the mouse position relative to the canvas
// unfortunately this can be tricky, we have to worry about padding and borders
function getMouse(e) {
      var element = canvas, offsetX = 0, offsetY = 0;

      if (element.offsetParent) {
        do {
          offsetX += element.offsetLeft;
          offsetY += element.offsetTop;
        } while ((element = element.offsetParent));
      }

      // Add padding and border style widths to offset
      offsetX += stylePaddingLeft;
      offsetY += stylePaddingTop;

      offsetX += styleBorderLeft;
      offsetY += styleBorderTop;

      mx = e.pageX - offsetX;
      my = e.pageY - offsetY
}