Рисование canvas мышкой и touchpanel iPad

начал изучать canvas и столкнулся с проблемой, рисования с помощю canvas мышкой onmousedown, onmousemove, onmouseup работает а для touchpanel iPad использовал touchstart, touchmove, touchend однако код для touchpanel не работает. Я закомментировал не работающий код, буду благодарен помощи и наставления пути истинного.

 function unit(){
            canvasOffset = canvas.getBoundingClientRect();
            ctx.lineJoin = "round";
            canvas.onmousedown = function(e) {
                drawing = true;
                ctx.beginPath();
            }
            //canvas.ontouchstart = function(e) {
            //  if (e.touches) e = e.touches[0];
            //  return false;
            //}
            //canvas.touchstart = function(e) {
            //      drawing = true;
            //      ctx.beginPath();
            //}
            canvas.onmousemove = function(e) {
                if (drawing) {
                    var mousePosition = getMousePosition(e);
                  ctx.lineTo(mousePosition[0], mousePosition[1]);
                            myColor =      document.getElementById('myColor').style.background;
                            ctx.strokeStyle = myColor;
                    ctx.stroke();
                }
            };
            //canvas.touchmove = function(e) {
            //      if (drawing) {
            //              var mousePosition = getMousePosition(e);
            //              ctx.lineTo(mousePosition[0], mousePosition[1]);
            //              myColor = document.getElementById('myColor').style.background;
            //              ctx.strokeStyle = myColor;
            //              ctx.stroke();
            //      }
            //};
            canvas.onmouseup = function(e) {
                drawing = false;
                ctx.closePath();
            }
            //canvas.touchend = function(e) {
            //      drawing = false;
            //      ctx.closePath();
            //}
            function getMousePosition(mouseEvent) {
                return [Math.floor(event.offsetX), Math.floor(event.offsetY)];
            }
}