Save the coordinates of my canvas drawing

Question

I am pretty new at this, but i’ve created a canvas where its possible to draw with both mouse and touch, and when I am finished with the drawing I want to save the coordinates of the drawing to a simple txt file(Not save as image).Is there anybody how knows if it possible and how to do it?

And is there a way to save the coordinates automatically when the mouseEnd or touchEnd event is fired(I don’t want to use a save button if possible)?

You'll have to keep track of the mousedown, mousemove and mouseup events (And their coordinates), and store this data in some format. You can't however, save a txt file from JavaScript. — Cerbrus

markE markE · Accepted Answer · 2014-03-17T17:35:59

Put each coordinate from mousedown and mousemove events into a javascript object:

{ x:10, y:25 }

And put all your coordinate-objects in an array:

var coordinates=[

{ x:10, y:25 },

{ x:20, y:70 },

];

When done painting: use JSON.stringify to turn your coordinates array into text that can be stored in a text file:

var coordinateText = JSON.stringify(coordinates);

Save the coordinates of my canvas drawing

1 Answers