I am working on a small project in google app engine. Using html5 canvas i need to show a canvas to the user on which user can draw nodes and connecting edges. I need to find the shortest path with dijkstras algorithm.
My problem is, i want to get the values from the canvas on clicking the submit button. The values are the co ordinates of nodes and corresponding edges. It will be a json data structure that could store lists. Major issue is on getting the values from canvas to javascript to store on the json.
My body part contains
<body>
<div>
<canvas id="canvas" height="500" width="1000" style="border:1px solid #c3c3c3;"></canvas>
</div>
<div>
<input type="button" value="Submit" onclick="submit()">
</div>
</body>
What to write on the submit function???
This would be a breeze if you were doing it in SVG. Unfortunately canvas is an immediate drawing surface, meaning when you draw something the canvas keeps no memory of anything that was drawn.
During your drawing phase you are going to have to keep track of all the necessary information (nodes and edges) yourself as you draw. Otherwise the information is simply not there.