How to re-draw a particular portion of canvas?

Question

I'm creating an HTML 5 game using the <canvas> and JavaScript .

In my canvas I'm loading high resolution images. In each Minute there will come some objects to this canvas. If user clicks on it. It'll be removed from the screen.

My issue:

I'm using clearRect() function for clearing the canvas. And again re-draws all images. Is it necessary that each time I re-draw the entire content ? Is there any option to re-draw that particular area ?

When I used the clearRect() to clear the exact area of that object. The background image also got removed. Is there any way to save the particular portion of background image and draw that portion with this saved image ? (Because my objects are moving on the canvas, I need to retreive the image data dynamically)

I'm new to WebTechnology and HTML 5. So please help me. Thanks in advance

Answer 1

Think of the canvas as a painting, it is not possible to remove a "layer" of content once it has been applied. You can specify a portion of the canvas to clear using clearRect(x,y,height,width) , but you will always need to redraw the background of what you deleted. The drawImage() function takes arguments to draw a specific portion of an image in a specific location, but perhaps more along the lines of what you are looking to use is imageData.

I suggest you do some reading up on the canvas here Mozilla Dev Network: Canvas

Answer 2

There are a few canvas layer libraries that adds support for the layers:

• CanvasLayers
• CanvasStack