Undo Logic – Implementing Undo for Painting on a Canvas

canvaslogic

I'm working on a module that allows users a basic paint function. I want to support undoing any modifications done to the painting surface. Assuming that we have one layer (for the sake of simplicity), what is a reasonable way to store painting done so they can be undone?

An idea I had was to encapsulate draw events as a kind of Undoable object. If someone presses, draws, and releases, the new data added would be contained in an object of what actions were carried out. This event might contain something like "color ARBG of size X at [array of points the user dragged over]".

I'm unsure of this being the optimal way to do it. If there's a lot edit commands done, my logic here would be to rewind back to the beginning and then re-apply every 'edit' done to the scene, render and display, without the UI becoming laggy (excluding fringe cases).

Is this feasible? Is there a better/more optimal way? This is the first time I've attempted such a thing and I'd like to make sure I'm going to learn the best way I can do it.

Note: My goal is not to use any libraries and handle this through my own coding.

Best Answer

Simplest method? Just limit the undo buffer size. Like you only allow the last 20 actions to be undone and keep a copy of the state 20 actions ago.

If you undo then there will be 19 actions in the undo buffer and redoing those is simpler than all since the beginning.

However extending from that you can keep copies of the state every X actions. This is the same idea of diff backups in databases, every month a full backup is done then a daily diff is taken. Then when needing to restore you just need to grab the latest full backup and reapply the diffs stored from that last backup on.

Related Solutions

HTML5 Game Development – Starting an HTML Canvas Game with No Graphics Skills

Generally speaking, 2D and pseudo-3D (such as isometric and other axonometric projections) is much easier than 3D in many regards.

First of all, 3D game logic is way more complex than 2D - many simple techniques for things like collision detection and physics simply don't work in 3D, and even for those that do, wrapping your head around what happens is significantly harder in 3D. (After all, we humans are built for living on a relatively flat surface, so our brains are inherently 2.5D).

Another problem is that 3D artwork is a lot more complex. With 2D graphics, you only have one viewpoint to consider; if your sprite looks good in the editor, it will look good in the game. In 3D, you are typically using mesh models, and they are dynamically shaded, and both the viewpoint and the light direction can be virtually anything. Your models still need to look convincing at all times, which makes creating them much harder than 2D sprites.

And then there are the technical constraints of the web:

WebGL is not yet universally available; getting it to run at all involves quite some black magic on some platforms, and even if it does work, performance characteristics are quite unreliable. 2D canvas, by contrast, works out-of-the box on any recent browser and OS. Doing 3D graphics on a 2D canvas, while perfectly possible, requires considerable trickery to get partial occlusion right (either clipping polygons against each other yourself, or using the sub-optimal Painter's Algorithm), and textured primitives are pretty much impossible. You'll also have to write all the lighting code yourself. A typical isometric graphics engine, however, is perfectly doable on a 2D canvas.
Javascript is single-threaded, and wasn't meant to provide accurate low-granularity timing, which you need for smooth graphics. Hickups in animation smoothness are much more tolerable in a 2D game than in 3D, unless the 3D scene is mostly static and doesn't involve a moving camera.

Javascript Canvas – How to Create Repetitive Drawings

Figured out what I was going for. Wanted to use loops to make the code as concise as possible, but ran into a few problems until I achieved this.

window.onload = draw;

function draw() {
    var canvas = document.getElementById('sheetmusic');
    var c = canvas.getContext('2d');
    var whitespace = 0;
    var ycoordinate = 10;

    //draw the staves 'x' number of times requested
    for (var x = 1; x <= 10; x++) {

        // draw the staff
        for (var i = 1; i <= 5; i++){
            c.strokeStyle = 'black';
            c.moveTo(0,ycoordinate);
            c.lineTo(canvas.width,ycoordinate);
            c.stroke();
            ycoordinate = ycoordinate + 10;
        }

        //draw white space beneath each staff
        c.fillStyle = 'white';
        c.fillRect(0,whitespace + 52,canvas.width,52);
        whitespace = whitespace + 100;
        ycoordinate = ycoordinate + 30;

    }
}

Now I can set x to repeat as many times as I want, in order to draw music staves in javascript, with the correct amount of adjustable whitespace in between them.

Had to go back and look up some more information on loops, as suggested by tgkprog. Thanks!

Demo'able JS Fiddle at http://jsfiddle.net/ShawnCodes/K8j7u/1/

Related Topic