Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Technologies for writing a web Paint program

I would like to do a a web Paint program. Basically I would like to mimic the Windows Paint program in a web application.

The features that I don't really know how to implement are:

  1. the drawing of 2D shapes (line, circle, etc) in a web browser
  2. drag and drop
  3. resize dynamically (seeing preview as you are moving the mouse for resizing)

I am guessing there will be HTML5, CSS3 and Javascript. I am mainly wondering if there are Javascript libraries that I could use to make my life easier.

Best regards

like image 426
Myna Avatar asked Apr 18 '13 21:04

Myna


1 Answers

Yes, you want to use canvas (the 'new flash'). It is a HTML5 element widely supported in newer (mobile) browsers.

Here are some links to get you started:
a complete ms-paint copy salvaged from the archive (last one I could find)
http://mudcu.be/sketchpad/
http://dev.opera.com/articles/view/html5-canvas-painting/
http://www.codeproject.com/Articles/355230/HTML-5-Canvas-A-Simple-Paint-Program-Touch-and-Mou

Some popular library's are:
fabric.js, KineticJS and Processing.js

Good luck!

like image 154
GitaarLAB Avatar answered Nov 05 '22 16:11

GitaarLAB