Polyline builder

by Raul Bojalil

HTML

<canvas width="2000" height="2000"></canvas>

JavaScript

var lines = [
 
	//1,2,3,4
  //1,2,4,3
  //1,3,2,4
  //1,3,4,2
  //1,4,3,2
  //1,4,2,3
  
  //2,1,4,3
  //2,1,3,4
  //2,3,1,4
  //2,3,4,1
  //2,4,1,3
  //2,4,3,1
  
  //3,1,4,2
  //3,1,2,4
  //3,2,1,4
  //3,2,4,1
  //3,4,1,2
  //3,4,2,1
  
  //4,1,2,3
  //4,1,3,2
  //4,3,1,2
  //4,3,2,1
  //4,2,1,3
  //4,2,3,1
 
 //--
 { id: 100, 
 x1: 16.589569091796875, y1: 7.939633011817932, 
 x2: 20.090225219726562, y2: 7.939633011817932 
 },
 //|
 {id: 101, 
 x1: 20.70210075378418, y1: 7.939633011817932,
 x2: 20.70210075378418, y2: 5.5118114948272705},
 //---
 {id: 104, 
 x1: 60.98819065093994, y1: 14.14042043685913,
 x2: 31.98819065093994, y2: 14.14042043685913},
 //--
 {id: 102, 
 x1: 20.70210075378418, y1: 5.5118114948272705, 
 x2: 31.98819065093994, y2: 5.5118114948272705},
 //|
 {id: 103, 
 x1: 31.98819065093994, y1: 14.14042043685913, 
 x2: 31.98819065093994, y2: 5.5118114948272705},
 
 
 

 {id: 4, x1: 35, y1: 70, x2: 10, y2: 10},
  {id: 2, x1: 30, y1: 10, x2: 65, y2: 40},
  {id: 3, x1: 65, y1: 40, x2: 35, y2: 70},
  {id: 1, x1: 10, y1: 10, x2: 30, y2: 10},
     
  
  {id: 7, x1: 140, y1: 60, x2: 200, y2: 20},
  {id: 5, x1: 70, y1: 10, x2: 140, y2: 10},
  {id: 8, x1: 200, y1: 20, x2: 220, y2: 80},
  {id: 6, x1: 140, y1: 10, x2: 140, y2: 60},
  
  {id: 9, x1: 10, y1: 100, x2: 10, y2: 150},
  {id: 10, x1: 10, y1: 150, x2: 60, y2: 200},
  {id: 12, x1: 90, y1: 200, x2: 200, y2: 100},
  {id: 11, x1: 60, y1: 200, x2: 90, y2: 200},
  {id: 14, x1: 200, y1: 100, x2: 200, y2: 200},
  
  {id: 18, x1: 100, y1: 220, x2: 100, y2: 300},
  {id: 17, x1: 30, y1: 220, x2: 100, y2: 220},
  {id: 15, x1: 10, y1: 250, x2: 30, y2: 250},
  {id: 16, x1: 30, y1: 250, x2: 30, y2: 220},
 
  
  //{id: 13, x1: 200, y1: 100, x2: 10, y2: 100},
];

var canvas = document.querySelector('canvas'),
    ctx = canvas.getContext('2d');

var buildPolylines = function(lines) {
	
  var polylineGroups = [];
  
  for (let i = 0; i < lines.length; i++) {

    var line1 = lines[i];

    let matched = false;


   ...