PDA

View Full Version : HTML5 canvas - save drawing?




foshizzle
Dec 1, 2009, 09:20 PM
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
Dec 1, 2009, 09:30 PM
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 (http://www.nihilogic.dk/labs/canvas2image/) script for saving off the canvas. I haven't used it myself so can't speak to its capability.

foshizzle
Dec 1, 2009, 09:41 PM
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.