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.
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.
Share Improve this question edited Jan 16, 2013 at 11:23 Gurpreet Singh 21.3k5 gold badges46 silver badges61 bronze badges asked Jan 16, 2013 at 11:15 user1983380user1983380 531 silver badge3 bronze badges2 Answers
Reset to default 5You need to use HTML5 canvas element to achieve this and it's a pretty plex 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./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
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?