Problème avec Canvas Draw

Question

J'utilise javascript pour dessiner des crochets sur l'image d'une voiture, ça marche bien quand tout ce qui est sur la page est un élément canvas mais quand j'ajoute autre chose à la page (disons un formulaire) , il refuse de caresser. tool.init_x et tool.final_y sont tous encore définis et fonctionnent correctement, aucune ligne n'est en cours de carénage.

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_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); } 

Answer 1

Le problème était dans ev.layerX et ev.layerY comme ils tirent par rapport au document dans son ensemble plutôt que l'élément de toile, à moins qu'il soit positionné. La solution était aussi simple que:

canvas 
{ 
    position: relative; 
}