why auto remove previous line, when draw new line?

[mdabbas-cse]

i'm draw something automatic line remove previous line.
how can we show all line?
see this example.. https://codesandbox.io/s/perfect-freehand-example-biwyi?fontsize=14&hidenavigation=1&theme=dark&file=/src/App.js

[nate-lumalabs]

The line is created from a list of points, stored in your points variable.

Whenever handlePointerDown is called, it replaces points with a single point (located where the pointerDown event happened)
Whenever handlePointerMove is called, it adds new points to the list of points (points)

If you want to draw multiple lines, you need multiple lists of points. You can do it by:

converting points from an array of points, to an array of arrays of points, or better yet call it an array of strokes.

const [strokes, setStrokes] = React.useState([])

Then handlePointerDown should create a new stroke each time it is called:

setStrokes([...strokes, [e.pageX, e.pageY, e.pressure])

And handlePointerMove should append points to the last stroke in the list of strokes:

const newStrokes = [...strokes]
newStrokes[newStrokes.length - 1].push([e.pageX, e.pageY, e.pressure])
setStrokes(newStrokes)

(all this code is untested, but the idea should be correct!)