Mission with Javascript :)

Good afternoon everyone, I have a problem with javascript.

I was assigned as a task to make a box that changes color when clicking on the page, I was doing my code but I managed to make the box but not change color.

I use Eventlistener because i want to repeat the change color.

Idk what is bad in my code i see alot of forums but nothing help.

I hope you can help me, thanks

<!DOCTYPE html>
<meta charset="utf-8">

<html><head>
  <title> Cuadro cambia color // By Abraham Gonzalez </title>
</head>

<script>


  function myBody(){
      var myBody;
      myBody = document.getElementById("myBody");
      myBody.addEventListener("click", btnRojoClic)
      ctx.fillStyle = rgb[Math.floor(Math.random() * 255)];
      
  }

  function btnRojoClic(){
    var myBody;
    myBody = document.getElementById("myBody")
    myBody.style.color = "red"

  }
  
</script>

<body id="myBody"> 

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



 var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");


  
 var posicion = 0;    
 var tamano = 0;
    
 setInterval(function () {
    ctx.clearRect(0, 0, 400, 400);
    ctx.fillRect(posicion,0 , tamano, tamano);
    
    posicion++;
    tamano++;
    
    if (posicion > 400){
        posicion = 0;
        tamano = 0;
    }
}, 30);



</script></body></html>