HTML5 canvas - save drawing?

[foshizzle]

Has anyone been able to do much with the <canvas> element? I'm going to be working on an internal webapp with rails and I'd like to have a section where someone could draw, with their mouse, anything in a fixed-size box. I'd then like to save what they drew as an image (to a database) to be used as the image for the content on that page.

I found a tutorial on how to draw over a page, and I've found many that let you put in a preset image within the <canvas> elements, but nothing that lets you save the drawing as a .jpg or .gif and use it later. And I'd like to be able to edit the drawing as well.

I know it won't work on all browsers (IE), but being an internal app I can control what browsers are used so this isnt an issue.

 

[angelwatt]

I've used canvas some. I used it to do some OCR and also did some edge detection and threshold filters. I was surprised how powerful and easy it was using canvas and a little JavaScript.

I found Canvas2Image script for saving off the canvas. I haven't used it myself so can't speak to its capability.

 

[foshizzle]

That's great - thanks for the link. I'm just starting to play with the canvas element, but I really like what HTML5 has in store.

I'll have to play around with that code a bit and see what I can come up with.