CanvasがIE 11を描画しない

Question

私は署名を描くキャンバスコードを持っています。コードはChromeとFirefoxで完璧に動作しますが、11

私のキャンバスはIE上では、すべての描画しません：

<canvas id="signitureCanvas" style="border: 3px solid #000; cursor:crosshair; background-color:white;"></canvas> 

私のコードは以下の通りです：

var canvas = document.getElementById('signitureCanvas'); 
    var ctx = canvas.getContext('2d'); 
    var canvasWidth = 200; 
    var canvasLength = 120; 
    canvas.width = canvasWidth; 
    canvas.height = canvasLength; 
    var canvasx = $(canvas).offset().left; 
    var canvasy = $(canvas).offset().top; 
    var last_mousex = last_mousey = 0; 
    var mousex = mousey = 0; 
    var mousedown = false; 
    var tooltype = 'draw'; 

    //Mousedown 
    $(canvas).on('mousedown', function (e) { 
     last_mousex = mousex = parseInt(e.clientX - canvasx); 
     last_mousey = mousey = parseInt(e.clientY - canvasy); 
     mousedown = true; 
    }); 

    //Mouseup 
    $(canvas).on('mouseup', function (e) { 
     mousedown = false; 
    }); 

    //Mousemove 
    $(canvas).on('mousemove', function (e) { 
     mousex = parseInt(e.clientX - canvasx); 
     mousey = parseInt(e.clientY - canvasy); 
     if (mousedown) { 
      ctx.beginPath(); 
      if (tooltype == 'draw') { 
       ctx.globalCompositeOperation = 'source-over'; 
       ctx.strokeStyle = 'black'; 
       ctx.lineWidth = 3; 
      } else { 
       ctx.globalCompositeOperation = 'destination-out'; 
       ctx.lineWidth = 10; 
      } 
      ctx.moveTo(last_mousex, last_mousey); 
      ctx.lineTo(mousex, mousey); 
      ctx.lineJoin = ctx.lineCap = 'round'; 
      ctx.stroke(); 
     } 
     last_mousex = mousex; 
     last_mousey = mousey; 
    }); 

    function ClearCanvas() { 
     var canvas = document.getElementById('signitureCanvas'); 
     var ctx = canvas.getContext('2d'); 
     ctx.clearRect(0, 0, canvas.width, canvas.height); 
    } 

は、IE 11です特に問題がある？

編集：

私は、問題は私のiframeである考え出し：高さと幅は300のすべてに設定されている

が正常に動作します：

<embed id="fred" type="application/pdf" style="border:1px solid #666CCC" title="PDF in an i-Frame" src="@Model.FilePath" frameborder="1" scrolling="yes" height="300" width="300" /> 

私は1000年にそれを設定すると、それは動作しません：

私はオフセットと何かだと思うが、私はどのように理解できないそれを修正する。

助けてくださいか？さらに知識を

Answer 1

誰に頼むかもしれない：私はすべてのブラウザで動作するコードのこの部分を発見した

は、layerXとlayerYは、Firefoxブラウザのために異なっている

：

var canvas = document.getElementById('signitureCanvas'); 
var ctx = canvas.getContext('2d'); 
var canvasWidth = 200; 
var canvasLength = 120; 
canvas.width = canvasWidth; 
canvas.height = canvasLength; 
var x = 0; 
var y = 0; 

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) { 
     ctx.beginPath(); 
     ctx.strokeStyle = 'black'; 
     ctx.lineWidth = 3; 
     ctx.lineJoin = ctx.lineCap = 'round'; 
     ctx.moveTo(x, y); 
     tool.started = true; 
    }; 

    // 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) { 
     if (tool.started) { 
      ctx.lineTo(x, y); 
      ctx.stroke(); 
     } 
    }; 

    // This is called when you release the mouse button 
    this.mouseup = function (ev) { 
     if (tool.started) { 
      tool.mousemove(ev); 
      tool.started = false; 
     } 
    }; 
} 

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

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

function ClearCanvas() { 
    var canvas = document.getElementById('signitureCanvas'); 
    var ctx = canvas.getContext('2d'); 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
}