StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POIs drawing on HTML5 Canvas supported in IE9 for Windows Phone 7.5?
text
Body
copied!<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>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload