JSFiddle - React, Tailwind, and code Playground

by Roydon DSouza

HTML

<canvas width="1280" height="795" id="canvas"></canvas>

JavaScript

$(document).ready(function(){

   //nienburg 1 var poly=[130,187,130,521,456,521,456,639,928,639,928,580,1200,580,1200,98,597,98,597,187 ];
    
  //koln ports 2  var poly=[196,31,196,684,1112,685,1112,521,1102,509,533,509,533,420,450,420,450,12,438,12,438,21,419,21,419,31 ];
    
 //viersen ground -3      var poly=[82,206,146,486,1211,514,1196,292 ];
    
     //viersen first 4      var poly=[232,112,232,650,279,650,280,710,703,710,703,560,1068,560,1068,27,623,27,623,112];
    
    //stad turnhout 5           var poly=[234,44,234,302,345,306,348,358,337,358,337,562,465,560,465,700,538,700,538,562,1101,562,1101,417,1120,416,1119,227,1088,227,1088,112,1066,112,1067,79,738,81,740,44];
    
   //vilvoorde 6      var poly=[245,190,184,337,342,603,586,603,586,704,1122,704,1192,589,995,96,398,96,398,190 ];
    
//wesel ground -7      var poly=[49,171,9,488,1275,488,1275,171 ];
    
    //wesel first - 8
      var poly=[101,153,39,631,425,631,425,456,1252,456,1252,347,1124,347,1124,153 ];
    
var canvas=document.getElementById("canvas")
var ctx = canvas.getContext('2d');
ctx.strokeStyle = '#000';

ctx.beginPath();
ctx.moveTo(poly[0], poly[1]);
for( item=2 ; item < poly.length-1 ; item+=2 ){ctx.lineTo( poly[item] , poly[item+1] )}

ctx.closePath();
ctx.stroke();
});