HTML5 canvas - save drawing?

Discussion in 'Web Design and Development' started by foshizzle, Dec 1, 2009.

Most Liked Posts
  1. foshizzle, Dec 1, 2009

    foshizzle macrumors regular

    Joined:
    Oct 17, 2007
    #1
    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.
     
    share
    + Quote Reply
  2. angelwatt, Dec 1, 2009

    angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    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.
     
    share
    + Quote Reply
  3. foshizzle, Dec 1, 2009

    foshizzle thread starter macrumors regular

    Joined:
    Oct 17, 2007
    #3
    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.
     
    share
    + Quote Reply
(You must log in or sign up to post here.)

Share This Page