JSFiddle - React, Tailwind, and code Playground

by David Joseph Guzsik

HTML

Enter X value:
<input type = "text" id = "p1">
Enter Y value:
<input type = "text" id = "p2">
<input type = "button" value = "Submit!" onclick = "plot();">

CSS

canvas{
    border: 1px solid black;
}

JavaScript

var canvas, ctx, PI, WIDTH, HEIGHT;
canvas = document.createElement('canvas');
WIDTH = 600;
HEIGHT = 600;
PI = Math.PI;

function draw(){
    ctx = canvas.getContext('2d');
    canvas.width = WIDTH;
    canvas.height = HEIGHT;
    document.body.appendChild(canvas);
    ctx.beginPath();
    ctx.moveTo(0, 300);
    ctx.lineTo(600, 300);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(300, 0);
    ctx.lineTo(300, 600);
    ctx.stroke();
    }
function plot(){
    var x_val = parseFloat(document.getElementById('p1').value);
    var y_val = parseFloat(document.getElementById('p2').value);
    ctx.beginPath();
    ctx.arc(x_val + 300, y_val + 300, 5, 0, PI * 2);
    ctx.fill();
}

    draw();