javascript - How to fetch coordinates values from a url

Question

I have a url here http://jacek.soc.port.ac.uk/tmp/ws/dyn2 and I want to fetch the coordinates from this website. How do I turn the information from the website into javascript variables so I can use x and y coordinates for my canvas ctx.fillRect(x, y, 10, 10) code?

question from:https://stackoverflow.com/questions/66064791/how-to-fetch-coordinates-values-from-a-url

Answer 1

you can fetch the url, then convert it to json and store the result in a x, y variable:

const canvas = document.querySelector("#canvas");

async function drawBox(canvas, url) {
  const {x, y} = await fetch(url).then(r => r.json());
  const ctx = canvas.getContext('2d');
  console.log(x, y);
  ctx.fillRect(x, y, 10, 10);
}

drawBox(canvas, 'http://jacek.soc.port.ac.uk/tmp/ws/dyn2')

canvas { border: 1px dotted #000; }

<canvas id="canvas" width="300" height="200"></canvas>