画布不会绘制IE 11

Question

I have a canvas code to draw a signature. The code works perfectly fine with chrome and Firefox but does not draw at all on IE 11.

My canvas is:

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

My code is as below:

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

Is IE 11 in particular having problems?

Edit:

I figured out the problem is with my Iframe:

When height and width are set to 300 everything works fine:

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

When I set it to 1000, it won't work:

 <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="1000" width="1000" />

I believe it's something with the offset but I can't figure how to fix it.

any help?

Answer 1

For further knowledge to whom might ask:

I have found this piece of code that works on all browsers, layerX and layerY are different for firefox browsers:

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