Getting values from HTML5 Canvas to Javascript

Question

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???

You can't get that information from the canvas. The canvas is just a bitmap, it doesn't know anything about what you draw on it, let alone "nodes" and "edges". Since you are drawing on it, you need to store the data you then. — RoToRa
– RoToRa, Commented Aug 25, 2011 at 8:20
Try canvas abstraction library like fabric.js which will provide you with object model and support for serialization. — kangax
– kangax, Commented Aug 25, 2011 at 17:18

Simon Sarris · Accepted Answer · 2011-08-25 14:00:47Z

1

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.

answered Aug 25, 2011 at 14:00

Simon Sarris

64.3k13 gold badges150 silver badges175 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Getting values from HTML5 Canvas to Javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related