4

I want to develop a website that allows users to draw their own pictures on the website with either the mouse or finger, for example a stick figure. I then want to be able to save the image so it can then be printed. Can anyone help as to what is the best way to go about this.

I have a pretty good understanding of html and css but I do believe this will require something more advanced for me to learn. Any assistance will be greatly appreciated.

Gurpreet Singh
  • 20,907
  • 5
  • 44
  • 60
user1983380
  • 43
  • 1
  • 3

2 Answers2

4

You need to use HTML5 canvas element to achieve this and it's a pretty complex task in my opinion but feasible.

You need to have excellent understanding of canvas interactions and drawing tools. You can find a very basic drawing application here.

http://dev.opera.com/articles/view/html5-canvas-painting/

Once user is happy with painting then you can save it to disk. Below is an example to do so:

Update Image, capture screengrab and save to disk using JavaScript

Community
  • 1
  • 1
Gurpreet Singh
  • 20,907
  • 5
  • 44
  • 60
0

There are several ways to achieve this. You can have a look at svg-edit, for example, which is an online SVG (vector graphics) editor (demo).

Or you can use the canvas element. See this question: Online Photoshop via HTML 5's Canvas?

Community
  • 1
  • 1
Aaron Digulla
  • 321,842
  • 108
  • 597
  • 820
  • As the canvas element isn't great in all browsers is it best to use the svg-edit? Do you know if svg-edit could possibly be integrated into a website with just a few of the functions eg: pencil and eraser and color? thanks for your help – user1983380 Jan 16 '13 at 13:20
  • There is no solution that is great in all browsers; each decision will have its limitations. I haven't tried to integrate svg-edit into anything, I'd just use it as a starting point to find out what you can do. – Aaron Digulla Jan 16 '13 at 16:49