Is it possible to set background image in canvas HTML5 and can do some paint functionality like Undo,Erase,Clear,Save that background image?

Question

I want to know about canvas HTML5. In my base canvas element i want to set background image,and on that i want to perform some functionality like in paint Erase,Undo,Clear and save that effected image(after applying all the effect undo,clear).. Any suggestion or example..

Answer 1

You can draw the Background to the canvas, by using drawImage(). All further Manipulations are painted ontop the Image.

When you hav finished your work you can Export your Canvasstate to an Image.

But you have to Hold a History for all task, because the canvas will be directly modified.

May be the Save and restore Method are helpful.

It is important, that you draw your image to the canvas first, so all other effects will affect the image.

Answer 2

最简单，最佳的性能实践是将背景作为div放在画布后面。

Answer 3

The history API can be used for undo and redo.

The toDataURL method of the Canvas object can be used to save an image.