How Can I Get The Free Drawn Lines As A List Of Lines, Where Each Line Is A List Of Coordinates?

I'm currently thinking about using fabric.js for an on-line handwriting recognition system. For such a system, I would need to send the drawn lines as a list of lines, where each l

Solution 1:

This is a different approach, but might help to achieve your goal:

var canvas = new fabric.Canvas('c',{backgroundColor: 'rgb(200,200,200)'});
canvas.isDrawingMode = true;
var rect = new fabric.Rect();

canvas.add(rect);

canvas.on('mouse:down', function(options) {
  startRecording();
});

var lines = [];


function startRecording(){
    var line = [];
    canvas.on('mouse:move', recordMoment);
    canvas.on("mouse:up", stopRecording);

    function recordMoment(event){
        line.push({x: event.e.x, y: event.e.y});    
        console.log(event.e.x + " " + event.e.y);    
    }
    function stopRecording(){
        lines.push(line);
        canvas.off('mouse:move', recordMoment);
        canvas.off("mouse:up", stopRecording);
    }
}

http://jsfiddle.net/B5Ub9/4/

Instead of analyzing the curves present on the screen, this code is recording touch positions while lines are drawn on canvas by the user.

EDIT added isDrawingMode to show the lines on canvas.