title: Is drawing on HTML5 Canvas supported in IE9 for Windows Phone 7.5?
body: <p>Is drawing on HTML5 Canvas supported in IE9 for Windows Phone 7.5?</p>
  
  <p>The code I'm using works for iOS, Android, webkit browsers, Firefox, Opera and IE9 but not for Windows Phone for some reason?  I saw somewhere that Windows Phone IE9 supported canvas (which I guess technically is true because the canvas shows up in the phone's browser) but you can't draw on it using touch events.</p>
  
  <pre><code>////////////////////////////////////////////
  //start mouse canvas drawn signature script
  ////////////////////////////////////////////
  var canvasToHide;
  var is_touch_device = 'ontouchstart' in document.documentElement;
  
  sigCanvas = document.getElementById('signatureCanvas');
  var context = sigCanvas.getContext('2d');
  context.strokeStyle = '#00f'; // blue
  
  if (is_touch_device) {
  
      // get the canvas element and its context
  
      // create a drawer which tracks touch movements
      var drawer = {
          isDrawing: false,
          touchstart: function (coors) {
              context.beginPath();
              context.moveTo(coors.x, coors.y);
              this.isDrawing = true;
          },
          touchmove: function (coors) {
              if (this.isDrawing) {
                  context.lineTo(coors.x, coors.y);
                  context.stroke();
              }
          },
          touchend: function (coors) {
              if (this.isDrawing) {
                  this.touchmove(coors);
                  this.isDrawing = false;
              }
          }
      };
  
      // create a function to pass touch events and coordinates to drawer
      function draw(event) {
          // get the touch coordinates
          var coors = {
              x: event.targetTouches[0].pageX - 100,
              y: event.targetTouches[0].pageY - 100
          };
          // pass the coordinates to the appropriate handler
          drawer[event.type](coors);
      }
  
      // attach the touchstart, touchmove, touchend event listeners.
      sigCanvas.addEventListener('touchstart', draw, false);
      sigCanvas.addEventListener('touchmove', draw, false);
      sigCanvas.addEventListener('touchend', draw, false);
  
      // prevent elastic scrolling
      document.body.addEventListener('touchmove', function (event) {
          event.preventDefault();
      }, false); // end body.onTouchMove
  
  } else {
  
      var bMouseIsDown = false;
  
      var iWidth = sigCanvas.width;
      var iHeight = sigCanvas.height;
  
      sigCanvas.onmousedown = function (e) {
          bMouseIsDown = true;
          iLastX = e.clientX - 100 + sigCanvas.offsetLeft + (window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft);
          iLastY = e.clientY - 100 + sigCanvas.offsetTop + (window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop);
      }
  
      sigCanvas.onmouseup = function () {
          bMouseIsDown = false;
          iLastX = -1;
          iLastY = -1;
      }
  
      sigCanvas.onmousemove = function (e) {
          if (bMouseIsDown) {
              var iX = e.clientX - 100 + sigCanvas.offsetLeft + (window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft);
              var iY = e.clientY - 100 + sigCanvas.offsetTop + (window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop);
              context.moveTo(iLastX, iLastY);
              context.lineTo(iX, iY);
              context.stroke();
              iLastX = iX;
              iLastY = iY;
          }
      }
  
  }
  </code></pre>