converting from cartesian to polar and back again in js

I am playing with HTML Canvas and javascript.

My ultimate goal will be to capture a mouse input through an event listener, convert the x and y data from that event into a polar coordinate system (centered around the middle of my canvas) do some modification to that polar point and then convert it back to a cartesian point in order to use in my canvas.

Here's what I have so far:

function cartesian(r, angle){
  return {
    x: r * Math.cos(angle),
    y: r * Math.sin(angle)
  }
}

var canvas = document.getElementById('c1');

ctx1 = canvas.getContext('2d');
ctx1.beginPath();
started1 = false;

c1.addEventListener("mousemove", (e)=>{
   x = e.layerX - 250;
   y = e.layerY - 250;
  
  //to polar
  r = Math.sqrt(x*x + y*y);
  angle = Math.atan(y/x);
 
 //from polar
  newCartesian = cartesian(r,angle);
  
   ctx = ctx1;
   if(!started1) {
    ctx.moveTo(newCartesian.x + 250, newCartesian.y + 250);
    started1= true;
   }
  else {
    ctx.lineTo(newCartesian.x + 250, newCartesian.y + 250);
    ctx.stroke();
  }
  
});
canvas {
  width: 500px;
  height: 500px;
  background: lightblue
}
  <canvas height="500" width="500" id="c1"></canvas>

Now, at the moment I am skipping the "modify the polar point" step that I outlined above, but that will come later if I can figure out this dilemma.

As you can see if you run my snippet, it almost works as expected. However whenever I attempt to draw left of the middle (Y axis) the resulting line appears inverted on the right half of the canvas.

Does anyone know why this is happening and how I can get the correct behavior.

Thanks!