Соединение точек между img в js и canvas

Question

Соединение точек между img в js и canvas.

1.javascript 2.CSS 3.html 4.Canvas

Мне нужна помощь с моим кодом, мне нужно сделать патч между точками. Я не знаю, как подключить эти точки.

и выглядит так: https://imgur.com/a/eEFaXRg

Спасибо за помощь, если хотите узнать что-то еще, напишите, я новичок :) Я могу отправить больше фото.

var app = {
  init: function(){

  },
  menu:{
  },
  drawing: {
    getDot: function(x, y){
      var elem = $('<div class="dot"></div>').css({top: y, left: x});
      $('body').append(elem);
      return elem;
    },
    getCenter: function($item){
        var top = $item.offset().top;
        var left = $item.offset().left;

        var w = $item.width();
        var h = $item.height();

        return [left + (w / 2), top + (h / 2)];
    },
    drawLine: {
      ctx: null,
      canvas: null,
      connectors: [],
      draw: function(){
        var _self = this;

        this.canvas = document.getElementById("canvas");
        this.ctx = canvas.getContext("2d");
        this.canvas.width = window.innerWidth;
        this.canvas.height = window.innerHeight;
        this.ctx.lineWidth = 3;

        var $canvas = $("#canvas");
        var canvasOffset = $canvas.offset();
        var offsetX = canvasOffset.left;
        var offsetY = canvasOffset.top;

        var last = null;

        $('#lista .item').each(function(){
          var item = $(this);

          var coords = app.drawing.getCenter(item);

          var target = app.drawing.getDot(coords[0], coords[1]);

          _self.connectors.push({
              from: !last ? $('#canvas') : last,
              to: item
          });

          last = $(this);
        });

        this.connect();
      },
      noop: function() {},
      connect: function() {
        var _self = this;

        //console.log(_self.connectors);

        _self.ctx.clearRect(0, 0, _self.canvas.width, _self.canvas.height);
        for (var i = 0; i < _self.connectors.length; i++) {
            var c = _self.connectors[i];
            var eFrom = c.from;
            var eTo = c.to;
            var pos1 = eFrom.offset();
            var pos2 = eTo.offset();

            console.log(pos1, pos2);

            //problem start - google: canvas linia od punktu a do b - pos1.left = x na osi wspol.

            var canvas = document.body.appendChild(document.createElement("CANVAS")), context = canvas.getContext("2d");

            context.beginPath();
              // all points are given as x (from left to right), y (from top to bottom)
              context.moveTo(10, 20); // x = 10 (10 px from the left edge of the canvas), y = 20 (20 px from the top edge of the canvas)
              context.lineTo(100, 97); // x = 100, y = 97
              context.lineTo(50, 105); // x = 50, y = 100

            context.stroke();

            //problem stop

        }
      }
    },
    drawDots: function(){
      var _self = this;

      $('#lista .item').each(function(){
        var item = $(this);

        var coords = _self.getCenter(item);

        _self.getDot(coords[0], coords[1]);

      });
    }
  }
};

$(document).ready(function(){
  app.drawing.drawLine.draw();
});

@import "flexboxgrid.min.css";
@import url('https://fonts.googleapis.com/css?family=Roboto:400,700');

body{
  font-family: 'Roboto', sans-serif;
  background: #fceab3;
  padding:0;
  margin: 0;
  position: relative;
}

.container{
  position: relative;
}

a{
  color: #000000;
  text-decoration: none;
}

header{
  background: #FFF;
  position: relative;
  z-index: 15;

  padding: 30px;

  ul{
    list-style-type: none;

    display: flex;
    justify-content: space-around;
    margin: 0;
    padding: 0;
  }
  .dropbtn {
    font-size: 16px;
    border: none;
    transition: all 0.3s ease-in-out;

    padding: 5px;
  }

  .dropdown {
    position: relative;
    display: inline-block;
  }

  .dropdown-content {
    display: none;
    position: absolute;
    opacity: 0;
    transition: all 0.3s ease-in-out;
    background-color: #f1f1f1;
    min-width: 160px;
    z-index: 15;
  }

  .dropdown-content a {
    color: black;
    transition: all 0.3s ease-in-out;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }

  .dropdown-content a:hover {background-color: #ddd; color: #FFF;}

  .dropdown.active, .dropdown:hover{
    .dropdown-content {display: block; opacity: 1; transform: translateX(-50%);}
    .dropbtn {background-color: #3e8e41; color: #FFF; a{color: #FFF;}}
  }
}

#mapa{
  position: relative;

  #ramka{
    position: absolute;
    display: none;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 8;
  }

  .tlo{
    position: absolute;
    left:0;
    width: 100%;
    top:0;
    z-index: 1;

    .map{
      position: relative;
      z-index: 1;
    }

    #map0{
      height: 500px;
      margin-bottom: -50px;
      background: url("svg/map0.svg");
    }
    #river{
      height: 150px;

      background: url("svg/river.svg");
    }
    #map1{
      z-index: -9;
      margin-top: -50px;
      margin-bottom: -50px;
      height: 500px;

      background: url("svg/map1.svg");
    }
    #clouds{
      height: 150px;

      background: url("svg/clouds.svg");
    }
    #map2{
      z-index: -2;
      height: 500px;
      margin-top: -100px;
      margin-bottom: -100px;
      background: url("svg/map2.svg");
    }

  }
}

#lista{

  position: relative;
  z-index: 10;

  .item{
    margin-top: 100px;
    margin-bottom: 200px;
    text-align: center;

    h2 {
      text-transform: uppercase;
    }

    img {
      max-width: 40%;
    }
  }
}

.dot{
  position: absolute;
  z-index: 100;
  width: 15px;
  height: 15px;
  border-radius: 8px;
  border: 1px solid #000;
  background: #900;
}
#canvas {
    position:absolute;
    border:1px solid red;
    width:100%;
    height:100%;
    left: 0;
    top: 0;
}
.draggable {
    width:50px;
    height:30px;
    background:skyblue;
    border:1px solid green;
}
.right {
    margin-left:100px;
    background:salmon;
}
#wrap2 {
    margin-top:-95px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="pl" dir="ltr">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style.css" type="text/css">
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <header>
      <ul>
        <li>
          <a href="#">Menu</a>
        </li>
        <li>
          <a href="#">x</a>
        </li>
        <li>
          <a href="#">x</a>
        </li>
        <li>
          <a href="#">x</a>
        </li>
        <li>
          <a href="#">Menu</a>
        </li>
        <li class="dropdown">
          <button class="dropbtn"><a href="#">Gry</a></button>
          <ul class="dropdown-content">
            <li><a href="#">Szachy</a></li>
            <li><a href="#">Chińczyk</a></li>
            <li><a href="#">Monopoly</a></li>
          </ul>
        </li>
      </ul>
    </header>

    <div id="mapa">
      <img id="ramka" src="svg/mask.svg"/>
      <div class="tlo">
        <div class="map" id="map0"></div>
        <div class="map" id="river"></div>
        <div class="map" id="map1"></div>
        <div class="map" id="clouds"></div>
        <div class="map" id="map2"></div>
      </div>
      <div class="container">
        <div id="lista" class="row">
          <div class="item col-xs-6 col-sm-4">
            <h2>Szachy</h2>
            <img src="svg/chess.svg">
          </div>
          <div class="col-xs-6 item col-sm-4">
            <h2>Chińczyk</h2>
            <img src="svg/chinese.svg">
          </div>
          <div class="col-xs-6 item col-sm-4">
            <h2>Scrabble</h2>
            <img src="svg/scrabble.svg">
          </div>
          <div class="col-xs-6 item col-sm-6">
            <h2>Jenga</h2>
            <img src="svg/jenga.svg">
          </div>
          <div class="col-xs-6 item col-sm-6">
            <h2>Monopoly</h2>
            <img src="svg/monopoly.svg">
          </div>
          <div class="item col-xs-6 col-sm-4">
            <h2>g5</h2>
            <img src="svg/monopoly.svg">
          </div>
          <div class="col-xs-6 item col-sm-4">
            <h2>g6</h2>
            <img src="svg/monopoly.svg">
          </div>
          <div class="col-xs-6 item col-sm-4">
            <h2>g7</h2>
            <img src="svg/monopoly.svg">
          </div>
        </div>
      </div>
    </div>

    <canvas id="canvas"></canvas>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="js/main.js"></script>
  </body>
</html>