HTML5 Canvas Coordinate Capture

Budget $30 - $250 USD
Bids 9
Average Bid $0
Status Closed

Requiring a tool that captures the html5 canvas X/Y coordinates for a given image. The tool should work along the lines of:  [url removed, login to view]


We want the tool to:

1. Select a Master Image to load into the html5 canvas.

2. Load the selected Master Image into the canvas

3. Use the mouse to click on the image canvas where to capture an X/Y coordinate (based on the image loading into 0 X/0Y from step 2).

This will:

· Capture the X / Y coordinates where the mouse has been clicked.

· Pop up a dialog that allows the entry of an ID for that X/Y location (e.g. 5506)

· Allows the ability to specify a Sub Image for the X/Y location (this will by default always be includes/[url removed, login to view])

· Clicking ok on the popup dialog will send the selected Master Image name | X/Y cords | ID | Sub Image name to a JS ajax function.  (we will write the js function that will record those details in our database - you just need to do an alert of those elements from the ajax array)


Attached is a pretty rough mock up of something we think will work.  If you have a better idea or features then please let us know via PM.

Get Free Quotes For A Project Like This

This project was awarded to


This is without a doubt the easiest project we've had delivered for us using Freelancer contractors. We briefed once and had a near perfect delivery the very first time. We normally expect 5-10 iterations and multiple re-briefings... However ICTwebdesign asked the questions up front and got a good understanding before they started. They weren't the cheapest - but the time saved in us testing incomplete iterations easily made up for that. Highly recommended if you want a speedy and efficient project delivered.
About the Freelancer
lctwebdesign Profile Picture

We are a dedicated team of web design experts. Partner with us today, and see the LCT difference.

Looking to make some money?

  • Set your budget and the time frame
  • Outline your proposal
  • Get paid for your work