Canvas zeichnet IE 11 nicht

Question

Ich habe einen Zeichenbereichscode, um eine Signatur zu zeichnen. Der Code funktioniert völlig in Ordnung, mit Chrom und Firefox, aber ziehen gar nicht auf IE 11.

Meine Leinwand ist:

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

Mein Code ist wie folgt:

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

Ist IE 11 insbesondere Probleme haben?

Edit:

dachte ich, das Problem mit meinem Iframe heraus ist:

Wenn Höhe und Breite auf 300 alles eingestellt funktioniert:

<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" /> 

Wenn ich es auf 1000 gesetzt, es wird nicht funktionieren:

Ich glaube, es ist etwas mit dem Offset, aber ich kann nicht herausfinden, wie etwas reparieren.

Hilfe?

Answer 1

Für weitere Wissen an wen könnte fragen:

ich dieses Stück Code gefunden haben, die auf allen Browsern funktioniert, layerX und layerY unterschiedlich sind für Firefox-Browser:

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