Store user's drawing with javascript

Question

I need to store a path drawn by user, along with the speed at any given point. Basically record how a line is drawn. I must be able to manipulate/edit the drawing (path and speed) afterwards.

Something like this but also with speed/velocity information:

http://paperjs.org/examples/path-simplification

I wonder how should I store the speed? Is there better way than store pointer place for example 10 times a second?

Answer 1

You can store it in your own custom-made object. Make an event listener that listens to every mousemove event after it's been clicked:

var pointArray = [];

onMouseMove(event){
    var pointData = {
        x: event.screenX,
        y: event.screenY,
        time: Date.now()
    }

    pointArray.push(pointData);
}

Now you have a long pointArray full of position & time information! By the way, there is no point in storing data 10 times per second because you'll only get redundant information if the mouse isn't moving. It's better to simply listen for mousemove.