Rubber Banding in HTML5

Question

I wish to draw a rectangle on my canvas but stretching the start point. but how do i erase the previous rectangles drawn during the process. I mean if my background color is red and i want to draw a black rectangle over it. while erasing the intermediate rectangles drawn during rubber banding, i wish to retain the background.

Answer 1

The question is a little hard to understand, but I'm assuming what you want to do is the following using getImageData and putImageData:

// save the entire canvas (in this example, its 500 x 500) to be restored later
image = context.getImageData(0, 0, 500, 500);

function draw() {
   context.clearRect(0, 0, canvas.width, canvas.height); // clear entire canvas
   context.putImageData(image, 0, 0); // restore entire canvas saved previously
   /** Now, draw other stuff on top of the canvas **/
}

Answer 2

You need to redraw the portion of the background the black rectangle previously occupied. It may be simpler to just redraw the entire background.

Answer 3

You simply have to keep track of every single object you want to draw and redraw every single one of them each frame.

You can optimize the process a bit, but you must keep track of each thing drawn so you can redraw.