How to resize or remove one object from canvas using Javascript?

Is there any change to remove or resize selected object from Canvas without changing other design.

For example:- I drawn circles (just for help Circle1, circle2, circle3) . circle1 will be bottom of other two circles. Now I want to remove circle2 or re-size. But it should not effect other circles开发者_如何学编程.

And it there any change do this without using clear Canavas method.

It should work something like powerpoint design just draw and resize and delete.

---

I do not think that is possible, canvas is a bitmap object as far as I know and anything you draw on it updates the image.

If you like to use circle as an object you probably should look to SVG

Citation: "once the rectangle is drawn, the fact that it was drawn is forgotten by the system. If its position were to be changed, the entire scene would need to be redrawn, including any objects that might have been covered by the rectangle."

---

You could try drawing the circles on separate canvases. In this case all you would have to do is to get rid of the Canvas element containing the circle itself.

Of course this means you'll have to do use some CSS trickery (namely z-index and absolute positioning)... It also incurs some overhead. This might be acceptable if you are dealing with an adequate amount of objects.

I agree with David about SVG. That might be a good option.

---

With Canvas you have to start setting up your own framework. I started a few simple tutorials on the subject, including resizing shapes.

In short, you're gonna have to start keeping track of each object you have drawn so you can re-draw them every time something moves.

---

One possibility is to use a canvas library like fabric.js, which allows you to draw and access canvas objects programmatically. Having canvas contents as a number of objects makes it easy to modify those objects dynamically, without affecting anything else; move, resize, delete, clone, change properties (color, opacity, etc.)