JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<div style="width:100%; position:relative;">
<canvas id="canvas" width="500" height="500"></canvas>
<img src="http://ar-ca.pl/mapa.jpg" width="100%" />
</div>
<h1 id="status">0 | 0</h1>

CSS

html,body{
    width: 100%;
    height: 100%;
    margin: 0;
}
    
canvas{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

JavaScript

var canvas = document.getElementById('canvas');
        if (canvas.getContext) {
            var ctx = canvas.getContext('2d');
            ctx.canvas.addEventListener('mousemove', function(event){
            var mouseX = event.clientX;
            var mouseY = event.clientY;
            var status = document.getElementById('status');
                status.innerHTML = mouseX + " | " + mouseY;
            });
                        
            ctx.beginPath();
            ctx.moveTo(67, 254);
            ctx.lineTo(57, 180);
            ctx.lineTo(87, 92);
            ctx.lineTo(158, 116);
            ctx.lineTo(193, 168);
            ctx.lineTo(196, 244);
            ctx.lineTo(135, 302);
            ctx.lineTo(67, 254);
            ctx.fillStyle = 'rgba(255, 240, 0, 0.5)';
            ctx.fill();
            ctx.closePath();
            
            
            ctx.beginPath();
            ctx.moveTo(211, 156);
            ctx.lineTo(209, 96);
            ctx.lineTo(226, 37);
            ctx.lineTo(292, 49);
            ctx.lineTo(307, 92);
            ctx.lineTo(305, 154);
            ctx.lineTo(286, 168);
            ctx.lineTo(258, 157);
            ctx.lineTo(254, 171);
            ctx.lineTo(211, 156);
            ctx.fillStyle = 'rgba(255, 240, 0, 0.5)';
            ctx.fill();
            ctx.closePath();
            
            
            ctx.beginPath();
            ctx.moveTo(230, 368);
            ctx.lineTo(228, 274);
            ctx.lineTo(259, 154);
            ctx.lineTo(396, 202);
            ctx.lineTo(406, 258);
            ctx.lineTo(398, 352);
            ctx.lineTo(357, 456);
            ctx.lineTo(230, 368);
            ctx.fillStyle = 'rgba(255, 240, 0, 0.5)';
            ctx.fill();
            ctx.closePath();
            
            
            ctx.beginPath();
            ctx.moveTo(338, 183);
            ctx.lineTo(340, 132);
            ctx.lineTo(357, 62);
            ctx.lineTo(453, 80);
            ctx.lineTo(455, 132);
...