I want to ask if is there a way to use onClick event on drawImage, because i want to click on gps icon and get a console.log in console.
I tried to do with
base_image.onclick = "myFunc();"
but it doesn't work.
Anyone have an idea?
let last_spawn_id = 0;
let array = [];
function getPictureCoords(x, y, z) {
return {x: 485 + x/11.6804138437 , y: 705 - y/11.6804138437}
}
const ctx = document.getElementById('map').getContext('2d')
function drawPlayerMarker(x, y, z, name) {
last_spawn_id += 1;
newCoords = getPictureCoords(x, y, z)
x = newCoords.x
y = newCoords.y
ctx.fillStyle = 'red'
ctx.beginPath()
ctx.arc(x, y, 5, 0, 2 * Math.PI)
base_image = new Image();
base_image.src = 'https://i.imgur.com/I1KVjGJ.png';
base_image.id = `item_${last_spawn_id}`;
base_image.div = `re`;
base_image.onload = function(test){
ctx.drawImage(base_image, x, y);
}
}
drawPlayerMarker(0, 0, 0, "Re")body {
zoom: 90%;
}
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<body>
<img src='https://i.imgur.com/qpZ4eWh.jpg' style="position: absolute">
<canvas height='1080', width='1080', id='map' style='height: 1080px; width: 1080px; position: absolute; z-index: 9999'>
</body>