netsimulator

<div style="position: relative;">
    <canvas id="layer3" width="900" height="900" style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
  <canvas id="layer2" width="900" height="900" style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
    <canvas id="layer1" width="900" height="900" style="position: absolute; left: 0; top: 0; z-index: 2;"></canvas>
</div>
<script>

 //layer 1- irrelevant for this bug
    var cal1 = document.getElementById('layer1');
    var col1 = cal1.getContext('2d');
//layer 2 - devices are drawn here
    var cal2 = document.getElementById('layer2');
    var col2 = cal2.getContext('2d');
//layer 3 - connections between devices
    var cal3 = document.getElementById('layer3');
    var col3 = cal3.getContext('2d');
//images are stored inside the same folder as html file
var sources = {
  router: 'router.jpg',
  switch: 'workgroup switch.jpg',
  pc: 'pc.jpg',
  packet: 'packet.png'
};


var images = [];

for(var src in sources) {
  images[src] = new Image();
  images[src].src = sources[src]; //most propably this line isn't doing it's job
}


    class Device {
        constructor(image, x, y){
            this.image = image;
            this.x = x;
            this.y = y;
        }
    };
//this only draws lines between devices, it's working
    function connect(startDevice, endDevice){
        col3.beginPath();
        col3.moveTo(startDevice.x + startDevice.image.width / 2, startDevice.y + startDevice.image.height / 2);
        col3.lineTo(endDevice.x + endDevice.image.width / 2, endDevice.y + endDevice.image.height / 2);
        col3.stroke();
    }

    function drawDevice(device){
        col2.drawImage(device.image, device.x, device.y);
    }

        var pc1 = new Device(images.pc, 50, 60);
        var router1 = new Device(images.router, 300, 300);
        var switch1 = new Device(images.switch, 700, 800);
        drawDevice(switch1);
        drawDevice(pc1);
        drawDevice(router1);
        connect(pc1, router1);
        connect(router1, switch1);

  </script>