Ante todo un saludo a todos. tengo un problema y quisiera ver si pueden ayudarme, estoy trabajando actualmente con canvas y estoy realizando un evento de click para que cuando esto ocurra me grafique una determinada imagen , asi como muestro en la siguiente imagen El problema radica en que la imagen no se gráfica en el lugar donde estoy realizando el click, esta es la función que estoy usando para obtener es el siguiente:

getMousePos(canvas, evt) {
    var  rect  =  canvas.getBoundingClientRect();
     return {
        x:  evt.clientX-rect.left,
        y:  evt.clientY-rect.top
     };
}

La manera en que estoy graficando:

var mousePos  =  getMousePos(canvas, event);
image.src  =  "mi_image.png";
imagen.onload= () => { 
    cx.drawImage(imagen, mousePos.x, mousePos.y); 
}

Ya busque en google y en las diferentes maneras que encontré me sucede lo mismo, capaz alguien que halla pasado por lo mismo me ayude, estaría muy agradecido.