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;

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!