# 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!