Drawing a circle at touched point

Question

I created a canvas element in an HTML file and I want to draw a circle at the location in the canvas where a user touches it. I tried the following code but it does not work. It does draw a circle when I touch the canvas, but the circles are drawn at totally different locations than where the finger touches the canvas.

var ongoingTouches = [];

function startup() {
  var myCanvas = document.getElementById("myCanvas");
  
  myCanvas.addEventListener("touchstart", handleStart, false);
  myCanvas.addEventListener("touchend", handleEnd, false);
  myCanvas.addEventListener("touchcancel", handleCancel, false);
  myCanvas.addEventListener("touchmove", handleMove, false);
}

function colorForTouch(touch) {
  var r = touch.identifier % 16;
  var g = Math.floor(touch.identifier / 3) % 16;
  var b = Math.floor(touch.identifier / 7) % 16;
  
  r = r.toString(16);
  g = g.toString(16);
  b = b.toString(16);
  
  var color = "#" + r + g + b;
  
  return color;
}

function copyTouch({ identifier, pageX, pageY }) {
  return {
    identifier,
    pageX,
    pageY
  };
}

function handleStart(e) {
  e.preventDefault();
  
  var myCanvas = document.getElementById("myCanvas");
  var ctx = myCanvas.getContext("2d");
  var touches = e.changedTouches;
  var rec = myCanvas.getBoundingClientRect();
  
  for (var i = 0; i < touches.length; i++) {
    ongoingTouches.push(copyTouch(touches[i]));
    
    var color = colorForTouch(touches[i]);
    
    ctx.beginPath();
    ctx.arc(touches[i].clientX - rec.left, touches[i].clientY - rec.top, 4, 0, 2 * Math.PI, false);
    ctx.fillStyle = color;
    ctx.fill();
  }

}

function handleEnd(e) {}

function handleEnd(e) {}

function handleCancel(e) {}

function handleMove(e) {}

document.addEventListener("DOMContentLoaded", startup);

#myCanvas {
  width: 600px;
  height: 600px;
  background-color: bisque;
  border: solid black 1px;
}

<h1>The TouchEvent</h1>
<canvas id="myCanvas"></canvas>

Could you please help me?