JSFiddle - React, Tailwind, and code Playground
HTML
<section id=linkedDrawings>
<p>Your drawing should look like this...</p>
<img id=linkedDrawingForComparison alt="What your box should look like."...
JavaScript
function linkedDrawing(canvas,url){
fetch(url)
.then((response)=> response.json())
.then((data)=>{
const c = canvas.getContext('2d');
console.log(data.url);
c.beginPath();
c.moveTo(data.x1, data.y1);
c.lineTo(data.x2, data.y2);
c.strokeStyle = data.col;
c.stroke();
})
}
linkedDrawing(linkedDrawingCanvas, "http://jacek.soc.port.ac.uk/tmp/ws/alpha.json")