Is there a way to avoid redrawing all the elements on the canvas (so I don't have to keep track of everything), while still having a smooth drawing experience with the currently drawn line?

Is there a way to avoid redrawing all the elements on the canvas (so I don't have to keep track of everything), while still having a smooth drawing experience with the currently drawn line?

• javascript
• html
• html5-canvas

• I am trying to use canvas for a drawing application. Already getting the mouse positions, but the result is (as you can guess) quite edgy. I'm trying to smooth out the final line, without then need to redraw it every frame from the beginning.. Maybe a way to calculate the smoother version of what is added each frame... – Mia Commented Dec 28, 2012 at 1:06
• 1 @x3ro if you experience the problem first hand you'll know that this was actually a very good question hiding behind somewhat poor wording. Making an effort before you vote to close a question is usually much appreciated. I've tried to improve the wording, if you care to help... – iwein Commented Mar 21, 2013 at 9:25
• @iwein: I think that everyone who posts an SO question should make the effort of writing a decent question. In the above that includes, for example, the link to what he's read, and a little code example of what he already has written. Also, the first paragraph makes a statement, the second paragraph asks a question, but I really can't see the direct connection between them (true, one might be able to interpolate, but still). Why should a poor question remain open on the off chance that someone es along who understands it? Why not force the OP to re-word it? – fresskoma Commented Mar 21, 2013 at 9:42
• @x3ro It was not a poor question, it was poorly worded. Forcing OP to fix it is a much less effective strategy than fixing it yourself. – iwein Commented Mar 21, 2013 at 9:47
• @Zettam can you provide a couple of links to background material? – iwein Commented Mar 21, 2013 at 9:48

1 Answer 1

This is a very good question, but its worded vaguely. Please be more careful wording questions in the future.

Typically when drawing smooth lines you need to redraw the line from the beginning.

You do not need to redraw everything from the beginning though, because you should be following these operations:

1. Save the current canvas to an in-memory canvas
2. Begin drawing a new line
3. As you're drawing, you are constantly:
   • Clearing the canvas
   • Drawing from in-memory canvas onto main canvas
   • Drawing the line-so-far
4. When the line finishes, you save the new canvas to the in-memory canvas and repeat this process

The only line you need to keep track of (in terms of points) is the "current" one. All the old lines are saved into the bitmap via the in-memory canvas.

Here's an example I made a long time ago, dealing with smooth lines specifically. The code organization is weird because I started with someone elses code, but it should give you the basic idea:

http://jsfiddle/NWBV4/10/

The drawing part described above is seen in the mousemove:

this.mousemove = function(ev) {
    if (tool.started) {
        context.clearRect(0, 0, 300, 300);
        // put back the saved content
        context.drawImage(memCanvas, 0, 0);
        tool.points.push({
            x: ev._x,
            y: ev._y
        });
        drawPoints(context, tool.points);
    }
};