JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="myCanvas" width="750" height="500" @click="reportXY"></canvas>
<div style="display:none;">
  <img id="myPic"
       src="https://styles.redditmedia.com/t5_lwhx6/styles/communityIcon_pkzirstz5ia11.png?width=256&s=c9257e07d87c13b574411c738d4dd8165bd34ce4"
       >
</div>
<span id="tooltip-span">Web Dev Buddies</span>

CSS

#tooltip-span {
	display:block;
	position: absolute;
}

JavaScript

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var img = document.getElementById("myPic");
var tooltip = document.getElementById("tooltip-span");

img.addEventListener('load', () => {
			ctx.drawImage(img, 0, 0);
});

canvas.onmousemove = function(e) {
		tooltip.style.left = e.clientX + 20;
		tooltip.style.top = e.clientY + 20;
}