Polar Coordinates

x:
0
y:
0
r:
0
θ:
0
Enter R and θ, θ should be in degrees.

R θ

The HTML file:

<html>
    <head>
        <script src="polarFuncs.js" defer></script>
        <script src="engine.js" defer></script>
    </head>

    <body>
    <h1> Polar Coordinates</h1>
        <table >
        <tr><td rowspan = 4>
             <canvas 
                 id="circles" 
                 width="400" 
                 height="400" 
                 style="border:1px solid #000000;">
            </canvas>
        </td> 
        <td> 
            <table > 
               <tr><td>x:</td><td><div id="xvalue">0</div>
            </table></td</tr>
        <tr><td>  
            <table> 
               <tr><td>y:</td><td><div id="yvalue">0</div>
            </table>
       </td</tr>
       <tr><td>
            <table> 
                <tr><td>r:</td><td><div id="rvalue">0</div>
            </table></td</tr>
        <tr><td>
           <table> 
               <tr><td>&theta;:</td><td><div id="tvalue">0</div>
          </table>
       </td</tr>
    </table>
    </body>
</table>

Enter R and &theta;, &theta; should be in degrees.
<p>
R <input type="text" id="demo1rForm">
&theta; <input type="text" id="demo1thetaForm">
<p>
<button type="button" id="plotButton"> Plot</button>
<button type="button" id="clearButton"> Clear  </button>

<p>
</html>

engine.js

"use strict"

const ResetButton = document.getElementById("clearButton");
const PlotButton = document.getElementById("plotButton");

function Reset() {
   document.getElementById("demo1rForm").value = 0;
   document.getElementById("demo1thetaForm").value = 0;

   Clear("circles");
   PolarAxis("circles");
   UpdateTable(0, 0);

   return;
}

function UpdateTable(r, theta) {
   let x,y;

   x = Math.round(r * Math.cos(theta*Math.PI/180.0)*10)/10;
   y = Math.round(r * Math.sin(theta*Math.PI/180.0)*10)/10;

   document.getElementById("xvalue").innerText = x;
   document.getElementById("yvalue").innerText = y;
   document.getElementById("rvalue").innerText = r;
   document.getElementById("tvalue").innerText = theta;

   return;
}


function PlotPolarPoint() {
   let r = document.getElementById("demo1rForm").value;
   let theta = document.getElementById("demo1thetaForm").value;

   PlotPoint("circles", r, theta);
   UpdateTable(r,theta);

   return;
}

ResetButton.addEventListener('click', Reset);
PlotButton.addEventListener('click', PlotPolarPoint);

Reset()

polarFuncs.js

"use strict"

function Clear(canvasName) {
    let canvas = document.getElementById(canvasName);
    let ctx = canvas.getContext('2d');

    ctx.clearRect(0,0,canvas.width, canvas.height);
   
    return;
}

function PlotPoint(canvasName, r, theta){
    let canvas = document.getElementById(canvasName);
    let ctx = canvas.getContext('2d');
    let cx = canvas.width/2;
    let cy = canvas.height/2;

    let t2 = theta * Math.PI/180.0;
    let rstep = Math.min(canvas.width, canvas.height)/20;

    let r2 = r * rstep;

    let x = cx + r2*Math.cos(t2);

    // but the y axis of the canvas is upside down, so -r sin(theta)
    let y = cy - r2*Math.sin(t2)

    ctx.fillStyle = "red";
    ctx.beginPath();
    ctx.arc(x,y,3,0, 2*Math.PI);
    ctx.fill();

    return;
}

function PolarAxis(canvasName){

    let canvas = document.getElementById(canvasName);
    let ctx = canvas.getContext('2d');

    let size = Math.min(canvas.width, canvas.height)/2;
    let rstep = size/10;
    let cx = canvas.width/2;
    let cy = canvas.height/2;
    let theta;
    let x,y;

    ctx.strokeStyle = "black";
    ctx.lineWidth = 1;

    // draw the circles
    ctx.beginPath();
    for(let i=0; i <= 10; i++) {
        ctx.arc(cx, cy, i*rstep, 0, 2*Math.PI);
    }

    // draw the lines
    for (let i=0; i<8;i++) {
        ctx.moveTo(cx,cy);
        theta = Math.PI/4 * i;

        x = cx + size*Math.cos(theta);
        y = cy + size*Math.sin(theta)

        ctx.lineTo(x,y);
    }
    ctx.stroke();

    return;
}