javascript - HTML5 Canvas erasing a drawn object? - Stack Overflow

admin管理员组

文章数量:1403461

I'm having trouble implementing an "erase" feature for the objects I draw. I draw objects like so:

function draw_obj1(context) {
    context.lineTo(...)
    context.arc(...)
    //etc
}

And these are drawn overtop of an image background I have for the canvas (via context.createPattern, fillStyle = pattern, etc).

So say the above function traces out a triangle using various lineTo calls. Now to "erase", or "undo" this drawing, one plan I had was to re-draw the 'xor' version of the same object on top of it, to undo it. I do this via context.globalCompositeOperation (see: .html).

This almost works, except the final result es up not pletely blank against my light-blue background. It es out as a light-greyish triangle, versus the original black-lined triangle.

EDIT - forgot to mention another idea I tried. Doing 'clearRect' on the area I need gone makes a white hole in my light-blue background which is no good.

So how should I go about undoing lines/arcs that I've drawn?

Cheers

I'm having trouble implementing an "erase" feature for the objects I draw. I draw objects like so:

function draw_obj1(context) {
    context.lineTo(...)
    context.arc(...)
    //etc
}

And these are drawn overtop of an image background I have for the canvas (via context.createPattern, fillStyle = pattern, etc).

So say the above function traces out a triangle using various lineTo calls. Now to "erase", or "undo" this drawing, one plan I had was to re-draw the 'xor' version of the same object on top of it, to undo it. I do this via context.globalCompositeOperation (see: https://developer.mozilla/samples/canvas-tutorial/6_1_canvas_posite.html).

This almost works, except the final result es up not pletely blank against my light-blue background. It es out as a light-greyish triangle, versus the original black-lined triangle.

EDIT - forgot to mention another idea I tried. Doing 'clearRect' on the area I need gone makes a white hole in my light-blue background which is no good.

So how should I go about undoing lines/arcs that I've drawn?

Cheers

• javascript
• jquery
• html

Share Improve this question Follow asked Jun 4, 2012 at 0:37 JDSJDS 17k4747 gold badges171171 silver badges234234 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

This won't be possible using only your Canvas content. Canvas element reacts like a real canvas: since things are drawn, they are merged and bound to the full picture.

This is because canvas, in most graphic APIs, is just an array of bytes. Computer can't know, alone, how to identify and differ the objects posing the current frame.

The best way to do this is to implement something like a "scene graph", a graph tree. You could then append objects to this graph tree and construct your own algorythm for drawing each object on the canvas.

You could have a history data structure to allow undo/redo appending/removing objects from the scene graph and redrawing each object in a small timeslice (nano-milliseconds).

That's a holistic view over your problem. Hope you know how to handle graphs programmatically.

More on here: How to add undo-functionality to HTML5 Canvas?

and here: http://www.abidibo/blog/2011/10/12/development-undo-and-redo-functionality-canvas/

You should do a "draw queue" instead. That is, put into an array the sequence of the operations done on the canvas. The up side of this approach is that every move you make is tracked in an array. The down side would be that the whole canvas has to be redrawn to acodate changes.

Canvas animation frameworks do these most of the time.

A simple representation is like this:

var drawingQueue = [
    {
        shape : 'rectangle',
        fill : 'red'
    },
    {
        shape : 'circle',
        fill : 'blue'
    },
    {
        shape : 'arc',
        fill : 'green'
    }
];

the drawingQueue is an array of mands/properties for mands that dictates what to draw in the canvas. In this example, this queue will draw a red rectangle, blue circle and green arc.

Say for example I want to remove the circle, I'd just remove it from the array and redraw everything in the queue - now without the circle. Let's say we do an undo, we'll use the array pop() to remove the last item, and then redraw the canvas - now without the arc.

But for faster development, I suggest using a framework instead. They will have internal tracking system for your shapes for easy adding and removing of "elements" in the canvas. Top picks are KineticJS and FabricJS.

prev_p = context.globalCompositeOperation
context.globalCompositeOperation = 'destination-out'
context.strokeStyle = "rgba(255, 255, 255, 1)"

/* Draw some "eraser" lines/shapes ..*/

context.globalCompositeOperation = prev_p

本文标签： javascriptHTML5 Canvas erasing a drawn objectStack Overflow