Do you remember the last post about canvas dealing with undo and redo functionality?

Now we'll see how to add a preview functionality, that is I want to see my straight line, or my circle, while keeping pressed the left mouse button and moving the pointer to change the shape size.

The first, bad, idea

Initially I thought that the way was to store the portion of canvas interested by the modification and restore it in the next mousemove call, so that the mousemove function has to respect the following flow:

• restore the previous saved state
• save the state of the portion of the canvas that now will be drawed
• draw the new state

Such flow works, but doesn ...

read the full post

Sometimes I like playing with html5 and javascript. Today I was playing around with a sort of paint project for mootools. Clearly I used the html5 canvas element and I wrote some tools (pencil, rectangle, ...) to draw in it.

Well, one of the first problems encountered is the need for a undo/redo functionality. Let's see a way to implement such thing.

Essentially when drawing we can imagine we pass through a series of different states. Each state represents the canvas aspect at that time. Clearly we have a continuous set of states, but it would be to "expensive" to consider and implement this way.

So we may consider a discrete set of states, where a new state is created consequentially to a user action (and not time dependent). Let's consider the creation of a new state consequent to a mousedown-mouseup action of the user, in other words a new state is created when the user draws something in one move.

Now imagine to consider three categories: past, present and future.

The present category includes only the present ...

read the full post