I am working on a simple game using HTML canvas and JavaScript.

The canvas is as follows: The canvas part

When the colored ball hits the sides of the image (img 1 and 2 in the above picture), its color will change randomly.

Now, I further want to add a function to it. What I want is that when the colored ball hits the side of the image, I want to change img 1 and 2. How can I do that in my code? I have done some research here and on YouTube but still have no idea. My code is as follows:

var canvas = document.getElementById("canvas_bb84_1");
canvas.width = 1000;
var c = canvas.getContext("2d");

//Draw the image to the canvas
var x = 220;
var radius = 15;
var color = "#0095DD";
function draw() {
  c.drawImage(p_fil, 100, 30, 100, 100); //img1
  c.drawImage(p_fil_flip, 810, 30, 100, 100); //img2
  c.drawImage(p_det_flip, 10, 30, 100, 100);
  c.drawImage(p_det, 900, 30, 100, 100);

  //Draw the ball
  c.beginPath();
  c.arc(x, 80, radius, 0, Math.PI * 2, false);
  c.fillStyle = color;
  c.fill();
  c.closePath();
}

//Update the animation of the ball and collision detection
var dx = 4;
function update() {
  if (x + radius > 820 || x - radius < 190) {
      dx = -dx;
      color = "#" + ((1 << 24) * Math.random() | 0).toString(16);
  } 
  x += dx;
}

//Initialize the images
var p_det = new Image();
var p_det_flip = new Image();
var p_fil = new Image();
var p_fil_flip = new Image();

//Animate
function animate() {
  p_det.src = "photon_detector.jpg";
  p_det_flip.src = "photon_detector_flip.jpg"
  p_fil.src = "p_filter_02.jpg";
  p_fil_flip.src = "p_filter_02_flip.jpg";

  window.requestAnimationFrame(animate);
  c.clearRect(0, 0, canvas.width, canvas.height);

  draw();
  update();
}

animate();