title: Canvas doesn't draw IE 11
body: <p>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.</p>
  
  <p>My canvas is: </p>
  
  <pre><code>&lt;canvas id="signitureCanvas" style="border: 3px solid #000; cursor:crosshair; background-color:white;"&gt;&lt;/canvas&gt;
  </code></pre>
  
  <p>My code is as below: </p>
  
  <pre><code> 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);
      }
  </code></pre>
  
  <p>Is IE 11 in particular having problems?</p>
  
  <p>Edit: </p>
  
  <p>I figured out the problem is with my Iframe:</p>
  
  <p>When height and width are set to 300 everything works fine:</p>
  
  <pre><code> &lt;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" /&gt;
  </code></pre>
  
  <p>When I set it to 1000, it won't work:</p>
  
  <pre><code> &lt;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" /&gt;
  </code></pre>
  
  <p>I believe it's something with the offset but I can't figure how to fix it.</p>
  
  <p>any help?</p>