const canvas = document.getElementById('canvas'); document.getElementById("file").addEventListener("change", function (e) { var file = e.target.files; var reader = new FileReader(); reader.readAsDataURL(file[0]); reader.onload = function () { var src = reader.result; drawCanvas(src); }; }, false); canvas.addEventListener("mousemove", function(e){ var borderWidth = 1; var rect = e.target.getBoundingClientRect(); var x = e.clientX - rect.left - borderWidth; var y = e.clientY - rect.top - borderWidth; document.getElementById("debug").innerHTML = `${x}:${y}` }); canvas.addEventListener("click", function(e){ var borderWidth = 1; var rect = e.target.getBoundingClientRect(); var x = e.clientX - rect.left - borderWidth; var y = e.clientY - rect.top - borderWidth; document.getElementById("textarea").value += `${x}:${y}\n` }); function drawCanvas(source) { if (canvas.getContext('2d')) { var context = canvas.getContext('2d'); var image = new Image(); image.src = source; image.onload = function () { canvas.width = image.width; canvas.height = image.height; context.drawImage(image, 0, 0); }; } }