processing JS and touch event listeners

I've made a lot of simple animations using processingJS with touch events so I can interact with the animations using my phone.

Here is one such example that also works with mousePressed():

When using the keyboard or mouse, I've learned that using keyPressed() and mousePressed are cleaner options than making my own event listeners. But I don't know of anything like this for touch events for processing JS.

Here is what I've done as an accommodation:

var canvas = document.getElementById("myCanvas");
canvas.addEventListener("touchstart", whenTouched);
canvas.addEventListener("touchmove", whenTouched);

function whenTouched(e) {
  if (mouseX > width/2 && mouseY > height/2) {
    background(255, 173, 0);
  } else if (mouseX > width/2 && mouseY < height/2) {
    background(100, 60, 200);
  } else if (mouseX < width/2 && mouseY > height/2) {
    background(25, 170, 35);
  } else if (mouseX < width/2 && mouseY < height/2) {
    background(255, 0, 0);

Here is my question:

  1. Is there a better or more common method of implementing touch interactivity within a processing JS sketch? I'm looking for a best-practices kind of thing. For example, is there a function like keyPressed() but for touch events?

I put a html file pretty much identical to the above fiddle online to access using my phone the way I've intended, and while it does work, it is dreadfully slow.

I also notice that mouseX and mouseY work fine with touch (unless I've done something really wrong). In the past I've used e.clientX and e.clientY but I couldn't sync the canvas coordinates with the window, unless the canvas took up the whole window.