Question

I want to draw a multiline (I mean some consecutive lines that share one coordinate with the previous and one with the next line) on mouse clicks. I have currently achieved this through mousemove event in jQuery:

var worksheetCanvas = $('#worksheet-canvas');

var context = worksheetCanvas.get(0).getContext("2d");

var mouse = {
     x: -1,
     y: -1
}

var parentOffset = $('#canvas-holder').parent().offset();
worksheetCanvas.click(function(e) {

    mouse.x = e.pageX - parentOffset.left;
    mouse.y = e.pageY - parentOffset.top;

    context.beginPath();
    context.moveTo(mouse.x, mouse.y);

    $(this).mousemove(function(k) {

        context.strokeStyle = "rgb(180,800,95)";

        context.lineTo(k.pageX - parentOffset.left, k.pageY - parentOffset.top);
        context.closePath();
        context.stroke();

    })

})​

But as I can show you in this example, when I move my mouse cursor, it leaves a trail of lines, which somehow I need to delete to create the impression of one single movable line which needs another point to be defined. I have tried to clear the unneeded lines, but the 2d context only has an clearRect() method, whereas I’m looking for something like clearPath().

Answer 1

There is not clearPath method according to the canvas reference

However, you are not going to need it anyways. If my assumptions are right, all you need to do is to store the values of previous strokes into an array:

I made a jsfiddle here so you can see it working and play around with it.

Clearing the canvas on every move is very effective and no performance issue.

Source Code with Explanations

$(function() {

var worksheetCanvas = $('#worksheet-canvas');

var context = worksheetCanvas.get(0).getContext("2d");
var clicked = false;

// maximum number of consecutive lines to be drawn
var maxLines = 5;

// The array of stored lines
var storedLines = [];

// The object for the last stored line
var storedLine = {};
var mouse = {
    x: -1,
    y: -1
}

var parentOffset = $('#canvas-holder').parent().offset();
worksheetCanvas.click(function(e) {
    clicked = true;

    mouse.x = e.pageX - parentOffset.left;
    mouse.y = e.pageY - parentOffset.top;

    context.moveTo(mouse.x, mouse.y);

    // Push last line to the stored lines

    if (clicked) {
        storedLines.push({
            startX: storedLine.startX,
            startY: storedLine.startY,
            endX: mouse.x,
            endY: mouse.y
        });

    }

    // set last line coordinates

    storedLine.startX = mouse.x;
    storedLine.startY = mouse.y;

    $(this).mousemove(function(k) {
        if (storedLines.length > maxLines) {
            storedLines.shift();
        }

        // clear the canvas

        context.clearRect(0, 0, 960, 500);
        context.beginPath();
        context.strokeStyle = "rgb(180,800,95)";

        // draw the stored lines

        for (var i = 0; i < storedLines.length; i++) {
            var v = storedLines[i];
            context.moveTo(v.startX, v.startY);
            context.lineTo(v.endX, v.endY);
            context.stroke();
        }
        context.moveTo(mouse.x, mouse.y);
        context.lineTo(k.pageX - parentOffset.left, k.pageY - parentOffset.top);
        context.stroke();

        context.closePath();


    })

})

})​