Using the JavaScript canvas, you can draw that line using only the first and last value:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script>
var canvas = document.body.querySelector("#myCanvas");
var ctx = canvas.getContext('2d');
function drawLine (X1, Y1, X2, Y2){
ctx.save();
ctx.beginPath();
ctx.translate(X1, Y1)
ctx.moveTo(0, 0);
ctx.lineTo(X2, Y2);
ctx.stroke();
ctx.restore();
}
drawLine(4, 4, 300, 300)
</script>
</body>
You can replace the function call at the end of the JavaScript code with whatever X1, Y1, X2 and y2 values you want. So in your case, the function call would be the X and Y of the first value and the last value, as follows:
drawLine(-391.41900634766, 35.793998718262, -288.67849731445, 22.47200012207)
EDIT: Avoid using negative values, because they are out of the view-box of the JavaScript canvas. Instead, use only positive values.
EDIT 2: if you really want to use negative values, use this code instead:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script>
var canvas = document.body.querySelector("#myCanvas");
var ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var canvasWidth = canvas.width;
var canvasHeight = canvas.height;
function drawLine (X1, Y1, X2, Y2){
ctx.save();
ctx.beginPath();
ctx.translate(canvasWidth/2, canvasHeight/2)
ctx.moveTo(X1, X2);
ctx.lineTo(X2, Y2);
ctx.stroke();
ctx.restore();
}
drawLine(-50, 50, 70, 270)
</script>
</body>
</html>
EDIT 3: I just realized you want to draw oval shapes instead of straight lines, but now this topic is too big to cover in a single answer, I highly recommend you go check out this series of tutorials on "how to draw and animate on a JavaScript Canvas":
https://www.youtube.com/playlist?list=PLpPnRKq7eNW3We9VdCfx9fprhqXHwTPXL
The JavaScript canvas is a very powerful tool. You can draw any kind of geometric shape you want, you can insert images and text in it, you can also create 2D games, and much much more. If you can use the JavaScript canvas with ES6 classes, you've got a very useful tool at your disposal!
