Canvas Help

[gazebo888]

I'm trying to make a canvas where you can freeform draw anything but when I use the example in the showcase, the drawing seems to skip. Is there a way to show the make the drawing continuous? Thank you for your help.

var currentDrawLine = null,
    startPoint;

var drawPane = isc.DrawPane.create({
    autoDraw: false,
    width: "100%",
    height: "100%",
    backgroundColor: "#f0f0f0",
    click : function () {




    },
    mouseMove : function () {

   startPoint = this.getDrawingPoint();

            // Start a new DrawLine having a random line color.

            currentDrawLine = isc.DrawLine.create({
                drawPane: this,
                autoDraw: true,
                lineWidth: 10,
                startLeft: startPoint[0],
                startTop: startPoint[1],
                endLeft: startPoint[0],
                endTop: startPoint[1]
            });



    }
});



isc.HLayout.create({
    width: "100%",
    height: "100%",
    membersMargin: 10,
    members: [
        isc.VLayout.create({
            members:[
                isc.Label.create({
                    contents:"Click to draw lines",
                    align:"center",
                    height:30
                }),
                drawPane
            ]
        })
    ]
});

[Isomorphic]

Are you referring to that when you move the mouse quickly, the coordinates reported by mouseMove events have gaps? That's to be expected. If you want to draw a continous line in that case, then you'll actually have to create the DrawLine segments with separate start and end points, like this:

var currentDrawLine = null,
    lastStartPoint, startPoint;

       // ...

     mouseMove : function () {
        var point = this.getDrawingPoint()
        lastStartPoint= startPoint || point;
        startPoint = point;;

        currentDrawLine = isc.DrawLine.create({
            drawPane: this,
            autoDraw: true,
            lineWidth: 10,
            startLeft: lastStartPoint[0],
            startTop: lastStartPoint[1],
            endLeft: startPoint[0],
            endTop: startPoint[1]
        });
    }