Question

0

100

Vistas

use onClick on drawImage

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>

about 4 years ago · Juan Pablo Isaza

Responde la pregunta

0

100

use onClick on drawImage

Encuentra empleos remotos

Andres GPT