4

I need to clear a rectangle Drawn on Image in Canvas with out damage existing image. I can draw small rectangle points and clear that out. But the problem is when I clear rectangle it remains as white small patch on image.

Can someone tell me how to clear a rectangle on image without damage the existing image.

I have used following methods to clear rectangles but didn't work.

1) context.fillStyle ="white";

2) context.clearRect(xCoordinate, yCoordinate, 10, 08);

Thanks in advance!

Mike Laren
  • 8,028
  • 17
  • 51
  • 70
KDS
  • 99
  • 1
  • 16

3 Answers3

3

Canvas doesn't work that way. It's a single layer, its also transparent by default. So with that in mind, you might be able to achieve what you want by simply giving the canvas element a CSS background. That way anything you draw on top of that background can easily be removed and the background will show through.

#backed-canvas{
    background-image: url(http://www.placebear.com/300/200);
}

JSFiddle example: https://jsfiddle.net/yLf5erut/

ericjbasti
  • 2,085
  • 17
  • 19
  • I think that is good idea, Can you give me an example please. I tried several CSS, But it didn't work accurately. If you have any sample please give me. Appreciate your answer. – KDS Jul 07 '15 at 22:11
  • This is working fine , But i need to save the edited image in file location. In that case i have only newly marked points without background image. – KDS Jul 09 '15 at 01:36
  • If you check out this new Fiddle https://jsfiddle.net/yLf5erut/3/ you'll see how I take the result of the canvas element and as a final action build out a new composition. This will combine the background and the canvas element so they can be saved together, without you needing to do any special layering. – ericjbasti Jul 09 '15 at 02:06
  • Yes That is good . I could composite the image, But unfortunately i can't send data via ajax call in order to save composite image. var image = document.getElementById("result-canvas").toDataURL("image/png"); >It throws security error exception from above statement. – KDS Jul 09 '15 at 02:52
  • Well my example is bad because its using an image from a different domain. That will always throw a security error, but it will work for images on the local domain. – ericjbasti Jul 09 '15 at 03:11
  • Thanks very much ericjbasti. You gave me good support. This solution is reduced my effort 50 %. Highly appreciated.. For all others - resolution is based on this fiddler solution - [https://jsfiddle.net/yLf5erut/3](https://jsfiddle.net/yLf5erut/3) – KDS Jul 09 '15 at 03:48
1

There is one thing you can do.

When create a rectangle on the canvas just get the image data like:

var imgData = context.getImageData(xCoordinate, yCoordinate, 10, 8);

and draw the rectangle.

When clearing out the rectangle just place then image data back like this:

context.putImageData(imgData, xCoordinate, yCoordinate);
Ajay Narain Mathur
  • 5,326
  • 2
  • 20
  • 32
  • This is right when there is no image loaded in to Canvas (But i need to change the coordinates.). In my case there is image loaded in to canvas and when i clear rectangle the out line of rectangle remains as it is because image background is in different color. I can see that cleared rectangle as small patches in image. – KDS Jul 07 '15 at 02:24
0

I suggest using 2 canvas elements one over another. So you can have the original image drawn on the bottom canvas with low zIndex, and the top one with highter zIndex can be used to draw / clear whatever needed. This is a common practice, and for more complecated animations you will end up with better performance.

Artur Aleksanyan
  • 480
  • 5
  • 10
  • If i want to save this image with newly drawn rectangles ,will full image be saved? . If there is a way to save full image can you send me code snipet ? Thanks Very Much – KDS Jul 09 '15 at 01:33
  • Thanks for your reply as well please see my last comment against ericjbasti' – KDS Jul 09 '15 at 03:54
  • Yes!. You can draw the top canvas on bottom one, get base64 from bottom canvas (which at this point, will have all your drawings and image on one layer), and then you can ajax the extracted image to back end, or put in on element. You can get use of [this](http://stackoverflow.com/questions/934012/get-image-data-in-javascript) and [this](http://stackoverflow.com/questions/15685698/getting-binary-base64-data-from-html5-canvas-readasbinarystring) to do it. – Artur Aleksanyan Jul 09 '15 at 12:20