function drawStart() {
    var canvas = document.getElementById('test');
    if (canvas.getContext) {
      var ctx = canvas.getContext('2d');
      ctx.fillStyle = "rgb(0,0,0)";
      ctx.fillRect(40, 40, 30, 30);
      ctx.strokeStyle = "rgb(200,200,200)";
      ctx.strokeRect(50, 50, (mapWidth-100), (mapHeight-100));
      getOrte();
      getLinien();

    }
}

function getOrte() {
    var canvas = document.getElementById('test');
    if (canvas.getContext) {
        for (i=0;i<10000;i++) {
            var ctx = canvas.getContext('2d');
            ctx.fillStyle = "rgb(200,0,0)";
            //ypsilon = Math.floor(Math.random() * (mapHeight - 100)) + 50;
            //xsss = Math.floor(Math.random() * (displayWidth - 100)) + 50;
            ypsilon = Math.floor(Math.random() * (mapHeight - 50)) + 50;
            xsss = Math.floor(Math.random() * (mapWidth- 50)) + 50;
            ctx.fillRect(xsss, ypsilon, 10, 10);
        }
        for (i=0;i<20000;i++) {
            var ctx = canvas.getContext('2d');
            ctx.fillStyle = "rgb(100,0,0)";
            //ypsilon = Math.floor(Math.random() * (mapHeight - 100)) + 50;
            //xsss = Math.floor(Math.random() * (displayWidth - 100)) + 50;
            ypsilon = Math.floor(Math.random() * (mapHeight - 50)) + 50;
            xsss = Math.floor(Math.random() * (mapWidth- 50)) + 50;
            ctx.fillRect(xsss, ypsilon, 3, 3);
        }
        for (i=0;i<10000;i++) {
            var ctx = canvas.getContext('2d');
            ctx.fillStyle = "rgb(100,100,100)";
            //ypsilon = Math.floor(Math.random() * (mapHeight - 100)) + 50;
            //xsss = Math.floor(Math.random() * (displayWidth - 100)) + 50;
            ypsilon = Math.floor(Math.random() * (mapHeight - 50)) + 50;
            xsss = Math.floor(Math.random() * (mapWidth- 50)) + 50;
            ctx.fillRect(xsss, ypsilon, 5, 5);
        }
    }
}

function getLinien() {
    var canvas = document.getElementById('test');
    if (canvas.getContext) {
        
        for (i=0;i<10000;i++) {
            var ctx = canvas.getContext('2d');
            ctx.beginPath(); 
            //ypsilon = Math.floor(Math.random() * (mapHeight - 100)) + 50;
            //xsss = Math.floor(Math.random() * (displayWidth- 100)) + 50;
            //ypsilon2 = Math.floor(Math.random() * (mapHeight - 100)) + 50;
            //xsss2 = Math.floor(Math.random() * (displayWidth - 100)) + 50;
            ypsilon = Math.floor(Math.random() * (mapHeight - 50)) + 50;
            xsss = Math.floor(Math.random() * (mapWidth- 50)) + 50;
            ypsilon2 = Math.floor(Math.random() * (mapHeight - 50)) + 50;
            xsss2 = Math.floor(Math.random() * (mapWidth - 50)) + 50;
            ctx.moveTo(xsss, ypsilon);
            ctx.lineTo(xsss2, ypsilon2);
            ctx.lineWidth = 0.25;
            ctx.strokeStyle = 'green';
            ctx.stroke();
        }
    }
}

// Mausraderkennung -> Runter +1 | Hoch -1
window.addEventListener("wheel", event => {
    const delta = Math.sign(event.deltaY);
    console.info(delta);
});