javascript - Why Wont My HTML5/JS App Work On My iPhone? -

how's going guys?

recently, given site, i've learned how draw rectangle on html5 canvas @ click of button... that's not problem:) problem this... unfortunately, didn't work @ when tried use on iphone... why:(?

---

here's code:

---

javascript:

// "rectangle" button function rect() { var canvas = document.getelementbyid('canvassignature'),     ctx = canvas.getcontext('2d'),     rect = {},     drag = false;       function init() {   canvas.addeventlistener('mousedown', mousedown, false);   canvas.addeventlistener('mouseup', mouseup, false);   canvas.addeventlistener('mousemove', mousemove, false); }   function mousedown(e) {   rect.startx = e.pagex - this.offsetleft;   rect.starty = e.pagey - this.offsettop;   drag = true; }   function mouseup() {   drag = false; }   function mousemove(e) {   if (drag) {     rect.w = (e.pagex - this.offsetleft) - rect.startx;     rect.h = (e.pagey - this.offsettop) - rect.starty ;     draw();   } }   function draw() {   ctx.fillrect(rect.startx, rect.starty, rect.w, rect.h); }   init(); } 

---

html5:

<div id="canvasdiv">     <canvas id="canvassignature" width="580px" height="788px" style="border:2px solid #000; background: #fff;"></canvas> </div>  <div id="rect">       <p><button onclick="rect();">rectangle</button></p> </div> 

---

any @ appreciated:)

for first got mistake in code star

rect() { 

and close @ end of script

and on touch devices need use touch* events think

something this

var canvas = document.getelementbyid('canvassignature'), ctx = canvas.getcontext('2d'), rect = {}, drag = false;  function init() {   canvas.addeventlistener("touchstart", touchhandler, false);   canvas.addeventlistener("touchmove", touchhandler, false);   canvas.addeventlistener("touchend", touchhandler, false); }   function touchhandler(event) {   if (event.targettouches.length == 1) { //one finger touche     var touch = event.targettouches[0];      if (event.type == "touchstart") {       rect.startx = touch.pagex;       rect.starty = touch.pagey;       drag = true;     } else if (event.type == "touchmove") {       if (drag) {         rect.w = touch.pagex - rect.startx;         rect.h = touch.pagey - rect.starty ;         draw();       }     } else if (event.type == "touchend" || event.type == "touchcancel") {       drag = false;     }   } }  function draw() {   ctx.fillrect(rect.startx, rect.starty, rect.w, rect.h); }  init();