クロムにマウスでキャンバスを描く

Question

私はマウスを使ってキャンバスを描画しようとしています。私のアプリケーションはFirefoxでうまく動作しますが、クロムで動作します。私のコードは次の通りである：

私は、マウスの座標を取得する上記のコードで

function getMousePos(canvas, evt) { 
     var rect = canvas.getBoundingClientRect(); 

     scaleX = canvas.width/rect.width, /*relationship bitmap vs. element for X*/ 
     scaleY = canvas.height/rect.height; /*relationship bitmap vs. element for Y*/ 
     return { 
      x: Math.round((evt.clientX - rect.left)*scaleX), 
      y: Math.round((evt.clientY - rect.top)*scaleY) 
     }; 

     } 

、「Lienzo」と呼ばれるdiv要素に含まキャンバスのために。キャンバスとlienzoのためのCSSは以下の通りです：

canvas { 
    image-rendering: -moz-crisp-edges; /* Firefox */ 
    image-rendering: pixelated;   /* Chrome */ 
    position:absolute; 
    width:100%; 
    height:auto; 
    background:white; 
    box-shadow: 0 0 10px black; 
} 

#lienzo { 
    position:relative; 
    margin-left:1em; 
    width:80%; 
} 

私は本当に間違っているかを理解いけないので、私は解決策を探すために試してみましたが、私はできません。

私がマウスでペイントするために使用するコードは、座標をプッシュする配列で構成されています。マウスを離すと、配列に含まれるすべての座標がプリントされます。ここでは、コードの断片である：

this.mostrarForma= function(){ 
      for(var i=0; i < lista_de_puntos.length; i++) 
        {     
       ctx.strokeStyle=color; 
       ctx.lineJoin=tipo; 
       ctx.lineWidth=grosor; 
       ctx.beginPath(); 
       //If i am at the begining of the array 
          if(lista_de_puntos[i][2] && i){ 
        //Entramos aqui si pulsamos y arrastramos 
             ctx.moveTo(lista_de_puntos[i-1][0], lista_de_puntos[i-1][1]); 
           }else{ 
        //If I press and I release the button 
             ctx.moveTo(lista_de_puntos[i][0], lista_de_puntos[i][1]); 
           } 
           ctx.lineTo(lista_de_puntos[i][0], lista_de_puntos[i][1]); 
           ctx.closePath(); 
           ctx.stroke(); 
        } 
     } 

私はそれをより明確にするためにフィドルのリンクを添付： https://jsfiddle.net/ciberlook/rhwcbwwL/18/ 任意のヘルプ？

Answer 1

私は解決策を見つけました。上のコードでは、関数mostrarForma（）が間違ったイベントで起動されます。ここに解決策があります：

$('canvas').mousedown(function(e){ 
    pulsado=true; 
    var posX=getMousePos(this,e).x; 
    var posY=getMousePos(this,e).y; 
     forma.definirForma(posX,posY,false); 
     forma.mostrarForma();  

    }); 

    $('canvas').mousemove(function(e){ 
     var posX=getMousePos(this,e).x; 
     var posY=getMousePos(this,e).y; 

     if (pulsado){ 

      forma.definirForma(posX,posY,true); 
      forma.mostrarForma(); 

     } 
    }); 

    $('canvas').mouseup(function(e){ 
     pulsado=false; //I release the button 

    }); 

    $('canvas').mouseleave(function(e){ 
     pulsado=false; 
    }); 
    forma.mostrarForma();