Geek Answers Handbook

How can users draw and save images on a website?

I want to create a website that allows users to draw their own images on the website with a mouse or finger, such as a stick figure. Then I want to save the image so that it can be printed. Can anyone help on what is the best way to do this.

I have a pretty good understanding of html and css, but I believe that I need something more advanced for this. Any help would be greatly appreciated.

+4
source share
2 answers

To do this, you need to use the HTML5 canvas element, and this is a rather difficult task, in my opinion, but doable.

You need a great understanding of the interaction of canvas and painting tools. Here you can find a very basic drawing application.

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

Once the user is happy with the painting, you can save it to disk. The following is an example:

Refresh image, capture screengrab and save to disk using JavaScript

+3
source

There are several ways to achieve this. For example, you can watch svg-edit , which is an online editor of SVG (vector graphics) ( demo ).

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

0
source

More articles:


All Articles