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?

score 1 · Accepted Answer · answered Feb 28 '17 at 19:20

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.

answered Feb 28 '17 at 19:20

M -

26,908
11
49
81

Makes sense. I will think about this. – AxlSmith Feb 28 '17 at 19:52
1

Why use the Date object when all mouse events have a high resolution timestamp. `event.timeStamp` in millisecond accurate to 1 microsecond – Blindman67 Feb 28 '17 at 20:50
I just tested your method in FFox, and I got 124 `console.logs` that read `18446744072697221000` before the value changed. `Date.now()` has better results. – M - Mar 01 '17 at 01:31
@Blindman67 How would you use that high resolution time stamp? The DOM timers are operating with milliseconds only, you can't "replay" the record with hires timestamps. – Teemu Mar 01 '17 at 16:26
@Teemu A good mouse can fire move events in less than a ms. Timers are not the only way to set state according to time. And there are a zillion ways that a hires timestamp is better than low res – Blindman67 Mar 01 '17 at 16:59
1

@Blindman67 You didn't answer the question. How would you use that high resolution timestamp? `requestAnimationFrame()` caps at 60fps, and `setTimeout()` caps out at 1ms... – M - Mar 01 '17 at 19:55
@MarcoDelValle You miss the point The timestamp is the time of the event, not the time the event listener was called, which can be tens of milliseconds after the event depending on what code is running. Javascript is blocking, event listeners will not be called until current execution is complete and all other events that came befor have been executed. The high resolution timeStamp is just a bonus – Blindman67 Mar 01 '17 at 20:40
@Blindman67 Eh, OP wants to emulate user's drawing speed. You can store the timestamps when recording a draw, but there's no use for it when "playing" the record. There simply is no way in JS to call drawing functions faster than about 1 - 10 msecs. hence using hires timestamp for the record would be overkilling. – Teemu Mar 02 '17 at 06:52
@Teemu If you are recording the mouse position for playback and use Date your record any janking that occurs during the record process. Using timestamp completely eliminates this problem. If you use event time to calculate the mouse speed and use that speed to add brush FX (like simulating ink pens) using the Date the result is awful, but using timeStamp produces beautifully smooth simulations. – Blindman67 Mar 02 '17 at 09:00

score 0 · Answer 2 · edited May 23 '17 at 12:00

0

Any line can be represented as a number of points. If you store the timestamp of each point, you'll be able to infer the average speed between any two points on the line.

Paper.js as you linked above is an interesting example of representing paths in JS. I'd recommend researching existing libraries to create and represent paths in Javascript. In the long run, it will save you time in comparison to writting your own library for the functionality.

Here's a relevant Stack Overflow Answer about differences in Javascript drawing libraries.

Javascript Drawing Library

edited May 23 '17 at 12:00

Community

1
1

answered Feb 28 '17 at 19:12

Alex Johnson

1,504
13
20

Timestamps are good idea.! I'm afraid average speed is not enough so that might not work. Anyway I will investigate that approach further... – AxlSmith Feb 28 '17 at 19:16

Store user's drawing with javascript

2 Answers2