In Progress

HTML5 Canvas Coordinate Capture

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.

Skills: HTML5

See more: html5 capture, html5 canvas capture array, html5 canvas coordinates, capture canvas coordinates html5, x js, master e work, html5 up, html5 image, html mock up, capture work, record html5, html5 based, html5 canvas capture, capture html image, dialog ajax, capture location, html5 loading, html5 popup, html5 canvas image click, html5 select default, image loading, work ajax loading, ajax image load, html5 click, load ajax image

About the Employer:
( 10 reviews ) Melbourne, Australia

Project ID: #2658588