Question

I’m trying to make a drawing app and currently working on the line tool and want to have a preview like exists in Microsoft Paint and other drawing applications.

I’m using HTML5 Canvas and Javascript and am also using typical canvas drawing API like so:

context.beginPath();
context.moveTo(originX, originY);
context.lineTo(mousePos.x, mousePos.y);
context.stroke();

However, it starts to look like this when the user is trying to determine which line he wants because it doesn’t erase the previous line:

The point in the middle is the origin from which the user began drawing the line from. I can’t clear the canvas every time because there are other things possibly drawn. Only solution I can think of is implementing some sort of undo functionality but that seems like it would be slow and sloppy.

Does anyone have any idea on how to implement this sort of preview functionality?

Answer 1

What I would recommend is using more than one canvas.

Live Demo

So basically they do the preliminary drawing on the top one that continues to clear, and once they release the mouse button it then draws it to the lower “permanent” canvas.

Code from the fiddle, figured Id add it for reference since jsFiddle has been slow lately.

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    drawCanvas = document.getElementById("drawCanvas"),
    drawCtx = drawCanvas.getContext("2d"),
    painting = false,
    lastX = 0,
    lastY = 0,
    curX = 0,
    curY = 0,
    startX = 0,
    startY = 0,
    lineThickness = 1;

canvas.width = canvas.height = 600;

drawCanvas.width = drawCanvas.height = 600;

drawCanvas.onmousedown = function(e) {
    startX = e.pageX - this.offsetLeft;
    startY = e.pageY - this.offsetTop;
    painting = true;

};

drawCanvas.onmouseup = function(e){
    painting = false;

    ctx.strokeStyle = "#000";
    ctx.beginPath();
    ctx.moveTo(startX, startY);
    ctx.lineTo(lastX, lastY);
    ctx.stroke();

    drawCtx.clearRect(0, 0, 600, 600);
}

drawCanvas.onmouseclick = function(e) {

    startX = e.pageX - this.offsetLeft;
    startY = e.pageY - this.offsetTop;

    painting = true;
};


drawCanvas.onmousemove = function(e) {
    if(painting){
        lastX = e.pageX - this.offsetLeft;
        lastY = e.pageY - this.offsetTop;
        drawCtx.clearRect(0,0,600,600);
        drawCtx.beginPath();
        drawCtx.moveTo(startX ,startY );
        drawCtx.lineTo(lastX, lastY);
        drawCtx.stroke();
    }
}
​