Draw on the image (jpg or png) using canvas and save the drawing with the image

I tried to draw on the image using canvas. Yes, of-course i did. But i need to merge the canvas drawing with the image instantly.

i.e My concept is, i have one image (#a) and i like to mark some places on the image (circle, rectangle, etc...), so i have just pick the canvas technique. (if any other technique is available please suggest me.)

So, after the canvas drawing, i want to merge the canvas image with my actual image (#a). Then, i'll get the marked image.

What i did before?.

I was set the background as my actual image(#a) to the canvas tag. (i.e canvas tag with some background image). I have done the drawing. Then, i have convert the canvas image as dataURI, then i will merge the actual image (#a) with canvas drawing using Linux command (imageMagic).

Can you tell me any other way, to draw directly on the image and save the drawing with image instantly.?

Thanks in advance开发者_StackOverflow社区.

Don't set the background of the canvas.

Instead, you want to use the drawImage() function of the canvas context to literally paint the image onto the canvas. Then do all your drawing operations.

Then you can save the image correctly. I'd also suggest looking in to Canvas2Image for that.

http://www.nihilogic.dk/labs/canvas2image/