Image Pixel Coordinate Generator. A simple Javascript web application for my Smartwatch Watch Face website, use to find the pixel coordinate in a photo, for watch face making purpose.

ImagePixelCoordinate.html

<p>Choose your clock_bg Photo</p>
<!-- choose image file, on choose, automatically set to the canvas -->
<input type="file" id="imageLoader" name="imageLoader"/>

<!-- hide the tool, only show once file is choosen -->
<div id="toolArea" style="display: none;">

	<p>Click on the image to place a marker<br> The markers on the image will show the coordinates value in decimal, while the table below will show the coordinates in Hex value.</p>
	<!-- draw image and markers on the canvas here -->
	<canvas id="Canvas" width="240" height="240"></canvas>

	<p>Coordinates Table (Values are in Hex)</p>

	<!-- append coordinate data to table -->
	<table id="coordinates" border="1">
	<tr>
		<th>Markers #</th>
		<th>X</th>
		<th>Y</th>
	</tr>
	</table>

</div>

<br>

<script type="text/javascript">
		
		
	// Original script: http://stackoverflow.com/a/32080151/5784900

	
	// get image on file input
	var imageLoader = document.getElementById('imageLoader');
    imageLoader.addEventListener('change', handleImage, false);

	var canvas = document.getElementById('Canvas');
	var context = canvas.getContext("2d");

	// Map sprite
	var mapSprite = new Image();
	
	// load image on file input, and set to the canvas
	function handleImage(e)
	{
	    var reader = new FileReader();
	    reader.onload = function(event)
	    {
	        mapSprite.src = event.target.result;
	    }
	    reader.readAsDataURL(e.target.files[0]);  
		document.getElementById('toolArea').style.display = "block"; // show the tool area once photo is choosen
	}
	
	// your markers icon file and setting here
	var Marker = function () {
	    this.Sprite = new Image();
	    this.Sprite.src = "http://icons.iconarchive.com/icons/icons-land/vista-map-markers/256/Map-Marker-Marker-Outside-Pink-icon.png" 
	    this.Width = 32;
	    this.Height = 32;
	    this.XPos = 0;
	    this.YPos = 0;
	}

	var Markers = new Array();
	var MarkersText = new Array();

	var mouseClicked = function (mouse) {
	    // Get corrent mouse coords
	    var rect = canvas.getBoundingClientRect();
	    var mouseXPos = (mouse.x - rect.left);
	    var mouseYPos = (mouse.y - rect.top);

	    // Move the marker when placed to a better location
		// markers coordinates is different from the actual coordinate, this is because of the markers image size
	    var marker = new Marker();
	    marker.XPos = mouseXPos - (marker.Width / 2);
	    marker.YPos = mouseYPos - marker.Height;
		
		// insert markers location to array
	    Markers.push(marker);
		
		// text for display above each markers, show x,y value in Decimal
	    MarkersText.push("(X:" + mouseXPos + ", Y:" + mouseYPos + ")"); 
	
		// create row and column for the table, and append the coordinates
	    var table = document.getElementById("coordinates");
	    var row = table.insertRow();
	    var cell1 = row.insertCell(0);
	    var cell2 = row.insertCell(1);
	    var cell3 = row.insertCell(2);

	    cell1.innerHTML = table.rows.length - 1; // dynamically append row numbers
	    cell2.innerHTML = mouseXPos.toString(16); // convert decimal to hex value
	    cell3.innerHTML = mouseYPos.toString(16);
	}

	// Add mouse click event listener to canvas
	canvas.addEventListener("mousedown", mouseClicked, false);

	var firstLoad = function () {
	    context.font = "15px Georgia";
	    context.textAlign = "center";
	}

	firstLoad();

	var main = function () {
	    draw();
	};

	var draw = function () {
	    // Clear Canvas
	    context.fillStyle = "#000";
	    context.fillRect(0, 0, canvas.width, canvas.height);

	    // Draw map
	    // Sprite, X location, Y location, Image width, Image height
	    // You can leave the image height and width off, if you do it will draw the image at default size
	    context.drawImage(mapSprite, 0, 0, 240, 240);

	    // Draw markers
	    for (var i = 0; i < Markers.length; i++) {
	        var tempMarker = Markers[i];
	        // Draw marker
	        context.drawImage(tempMarker.Sprite, tempMarker.XPos, tempMarker.YPos, tempMarker.Width, tempMarker.Height);

	        // Calculate postion text
	        var markerText = "Marker #" + (i+1) + " " + MarkersText[i]; // display the text above the markers

	        // Draw a simple box so you can see the position
	        var textMeasurements = context.measureText(markerText);
	        context.fillStyle = "#666";
	        context.globalAlpha = 0.7;
	        context.fillRect(tempMarker.XPos - (textMeasurements.width / 2), tempMarker.YPos - 15, textMeasurements.width, 20);
	        context.globalAlpha = 1;

	        // Draw position above
	        context.fillStyle = "#000";
	        context.fillText(markerText, tempMarker.XPos, tempMarker.YPos);
	    }
	};

	setInterval(main, (1000 / 60)); // Refresh 60 times a second

</script>