Использование HTML-холста с поддержкой касания

Question

Я использую сценарий, который нашел в Интернете, поэтому у меня может быть Canvas, где пользователи могут рисовать.

Они выбирают цвет, а затем рисуют все, что хотят.

Это работает нормально, но сейчас я реализовал это на Phonegap Hybrid App и, к сожалению, это не поддерживает сенсорные события.

Я попытался изменить EventListeners на 'touchmove', 'touchstart' и 'touchend', но мне не повезло с этим.

У меня есть код:

---

init();
var canvas, ctx, flag = false,
  prevX = 0,
  currX = 0,
  prevY = 0,
  currY = 0,
  dot_flag = false;

var x = "black",
  y = 2;

function init() {
  canvas = document.getElementById('can');
  ctx = canvas.getContext("2d");
  canvas.width = canvas.offsetWidth;
  canvas.height = canvas.offsetHeight;
  w = canvas.width;
  h = canvas.height;

  canvas.addEventListener("mousemove", function(e) {
    findxy('move', e)
  }, false);
  canvas.addEventListener("mousedown", function(e) {
    findxy('down', e)
  }, false);
  canvas.addEventListener("mouseup", function(e) {
    findxy('up', e)
  }, false);
  canvas.addEventListener("mouseout", function(e) {
    findxy('out', e)
  }, false);
}

function color(obj) {
  switch (obj.id) {
    case "green":
      x = "green";
      break;
    case "blue":
      x = "blue";
      break;
    case "red":
      x = "red";
      break;
    case "yellow":
      x = "yellow";
      break;
    case "orange":
      x = "orange";
      break;
    case "black":
      x = "black";
      break;
    case "white":
      x = "white";
      break;
  }
  if (x == "white") y = 14;
  else y = 2;

}

function draw() {
  ctx.beginPath();
  ctx.moveTo(prevX, prevY);
  ctx.lineTo(currX, currY);
  ctx.strokeStyle = x;
  ctx.lineWidth = y;
  ctx.stroke();
  ctx.closePath();
}

function erase() {
  var m = confirm("Want to clear");
  if (m) {
    ctx.clearRect(0, 0, w, h);
    document.getElementById("canvasimg").style.display = "none";
  }
}

function save() {
  document.getElementById("canvasimg").style.border = "2px solid";
  var dataURL = canvas.toDataURL();
  document.getElementById("canvasimg").src = dataURL;
  document.getElementById("canvasimg").style.display = "inline";
}

function findxy(res, e) {
  if (res == 'down') {
    prevX = currX;
    prevY = currY;
    currX = e.clientX - canvas.offsetLeft;
    currY = e.clientY - canvas.offsetTop;

    flag = true;
    dot_flag = true;
    if (dot_flag) {
      ctx.beginPath();
      ctx.fillStyle = x;
      ctx.fillRect(currX, currY, 2, 2);
      ctx.closePath();
      dot_flag = false;
    }
  }
  if (res == 'up' || res == "out") {
    flag = false;
  }
  if (res == 'move') {
    if (flag) {
      prevX = currX;
      prevY = currY;
      currX = e.clientX - canvas.offsetLeft;
      currY = e.clientY - canvas.offsetTop;
      draw();
    }
  }
}

<canvas id="can" width="400" height="400"></canvas>

<div class="controlos-canvas row">

  <div class="cores col-50">
    <h5 class="titulo-controlos">Escolhe a Cor</h5>
    <div style="background:green;" class="picker-cor" id="green" onclick="color(this)"></div>
    <div style="background:blue;" class="picker-cor" id="blue" onclick="color(this)"></div>
    <div style="background:#ff0000;" class="picker-cor" id="red" onclick="color(this)"></div>
    <div style="background:yellow;" class="picker-cor" id="yellow" onclick="color(this)"></div>
    <div style="background:orange;" class="picker-cor" id="orange" onclick="color(this)"></div>
    <div style="background:black;" class="picker-cor" id="black" onclick="color(this)"></div>
  </div>


  <div class="funcoes col-50">

    <div class="eraser">
      <h5 class="titulo-controlos">Apagar</h5>
      <div class="borracha" id="white" onclick="color(this)"></div>
    </div>

    <img id="canvasimg" style="position:absolute;top:10%;left:52%;" style="display:none;">
    <input type="button" value="Guardar" id="btn" size="30" onclick="save()">
    <input type="button" value="Limpar" id="clr" size="23" onclick="erase()">

  </div>

</div>