<div class="row">
    <div class="col-md-4"> </div>
    <div class="col-md-6" style="margin-left: 25%;">
        <canvas width="900" height="900" id="canvas"></canvas>
        <!-- <img style="width: 900px;height: 900px;" src="/s/JillLabel-02.png"> -->
    
      
    </div>
</div>



<script>
    var audio = new Audio('');

    var lineArray = {
        "Line_16_2" : {
            "Start" : {
                "X" :261,
                "Y" : 203
            },
            "End" : {
                "X":554,
                "Y":158
            }
        }
    }
    var c = document.getElementById("canvas");
    var ctx = c.getContext("2d");
    c.addEventListener('click', function(event) { 
        // console.log(event.offsetX)
        // console.log(event.offsetY)
        // console.log(lineArray["Line_16_2"]["Start"]["X"])

        const rect = canvas.getBoundingClientRect()
        const xReal = event.clientX - rect.left
        const yReal = event.clientY - rect.top
        // console.log("x: " + x + " y: " + y)

        if (audio.duration > 0 && !audio.paused) {

        console.log("playing");

        } else {

            if((xReal >= 210 &&  xReal <= 260) && (yReal >= 155 && yReal <=220)) {
            // console.log("TEST")
             drawLine(lineArray["Line_16_2"]);
             audio = new Audio('/s/10Fragment-a-2-16.wav');
             audio.play();
        }

        }
       
        

    });
    var topMap = new Image();
    topMap.src = "images/JillLabel-02.png";
    // document.addEventListener("DOMContentLoaded", init, false);
    
    // var topMap = new Image();
    // topMap.src = "images/JillLabel-02.png";

function drawMap() {
   
    ctx.clearRect(0, 0, 900, 900);
    ctx.drawImage(topMap, 0, 0,900,900);

}
function myFunction() {
  alert("Hello! I am an alert box!");
}

function init() {
    drawMap();
    
}

function drawLine(line) {
    ctx.beginPath();
    ctx.moveTo(line["Start"]["X"], line["Start"]["Y"]);
    ctx.lineTo(line["End"]["X"], line["End"]["Y"]);
    ctx.strokeStyle = "orange";
    ctx.shadowBlur = "10";
    ctx.shadowColor = "yellow";
    ctx.lineWidth = 5;
    ctx.stroke();
}

topMap.onload = function() {
  init();
}
</script>
Marivon (Copy)
