jQuery Plugin for Simple Drawing Surface - wPaint

wPaint is a simple jQuery paint plugin for creating a drawing surface based on jQuery UI that allows you to import and export existing images.

How to use it:

1.  Include jQuery library, jQuery UI and other necessary javascript files in the head section

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="./inc/jquery.ui.core.min.js"></script>
<script type="text/javascript" src="./inc/jquery.ui.widget.min.js"></script>
<script type="text/javascript" src="./inc/jquery.ui.mouse.min.js"></script>
<script type="text/javascript" src="./inc/jquery.ui.draggable.min.js"></script>

<script type="text/javascript" src="./inc/wColorPicker.js"></script>
<script type="text/javascript" src="wPaint.js"></script>

2. Include wColorPicker CSS and wPaint CSS

<link rel="Stylesheet" type="text/css" href="./inc/wColorPicker.css" />
<link rel="Stylesheet" type="text/css" href="./wPaint.css" />

3. Markup 

<div id="wPaint"></div>

4. Call the plugin

<script type="text/javascript">
	$("#wPaint").wPaint();
</script>

5. Options

$('#wPaint').wPaint({
    mode                 : 'Pencil',         // drawing mode - Rectangle, Ellipse, Line, Pencil, Eraser
    lineWidthMin         : '0',              // line width min for select drop down
    lineWidthMax         : '10',             // line widh max for select drop down
    lineWidth            : '2',              // starting line width
    fillStyle            : '#FFFFFF',        // starting fill style
    strokeStyle          : '#FFFF00',        // start stroke style
    fontSizeMin          : '8',              // min font size in px
    fontSizeMax          : '20',             // max font size in px
    fontSize             : '12',             // current font size for text input
    fontFamilyOptions    : ['Arial', 'Courier', 'Times', 'Trebuchet', 'Verdana'],
    fontFamily           : 'Arial',          // active font family for text input
    fontTypeBold         : false,            // text input bold enable/disable
    fontTypeItalic       : false,            // text input italic enable/disable
    fontTypeUnderline    : false,            // text input italic enable/disable
    image                : null,             // preload image - base64 encoded data
    imageBg              : null,             // preload image bg, cannot be altered but saved with image
    drawDown             : null,             // function to call when start a draw
    drawMove             : null,             // function to call during a draw
    drawUp               : null,             // function to call at end of draw
    menu                 : ['undo','clear','rectangle','ellipse','line','pencil','text','eraser','fillColor','lineWidth','strokeColor'], // menu items - appear in order they are set
    menuOrientation      : 'horizontal'      // orinetation of menu (horizontal, vertical)
    menuOffsetX          : 5,                // offset for menu (left)
    menuOffsetY          : 5                 // offset for menu (top)
    menuTitles           : {                 // icon titles, replace any of the values to customize
        'undo': 'undo',
        'redo': 'redo',
        'clear': 'clear',
        'rectangle': 'rectangle',
        'ellipse': 'ellipse',
        'line': 'line',
        'pencil': 'pencil',
        'text': 'text',
        'eraser': 'eraser',
        'fillColor': 'fill color',
        'lineWidth': 'line width',
        'strokeColor': 'stroke color',
        'bold': 'bold',
        'italic': 'italic',
        'underline': 'underline',
        'fontSize': 'font size',
        'fontFamily': 'font family'
    },
    disableMobileDefaults: false             // disable default touchmove events for mobile (will prevent flipping between tabs and scrolling)
});

More Examples:

• Fullscreen
• Web APP

Change Log:

v2.5.0 (2014-03-02)

• Added option to stretch small images to full canvas dimensions.

v2.4.0 (2014-02-21)

• Added ability to change menu orientation on the fly.

v2.3.1 (2013-12-23)

• Fix setter/getter routine.

v2.3.0 (2013-12-21)

• Clean up and optimized plugin initialization code.

v2.2.2 (2013-12-12)

• Fix for undo/redo.

v2.2.1 (2013-10-23)

• Fixed callback events to fire on all menu icons that interact with canvas.

v2.2.0 (2013-10-23)

• Fixed callback events to fire on all menu icons that interact with canvas.

v2.1.2 (2013-09-27)

• Updated wColorPicker version to v2.1.7.

v2.1.1 (2013-09-13)

• Added resize function
• Added "path" option for setting menu and cursor icon paths from js

v2.0.6 (2013-09-03)

• Added undo for bucket tool
• Updated options and added callbacks for drawing

v1.14.0 (2013-07-15)

• Added icons for dropper and bucket
• Updated demo page

---

This awesome jQuery plugin is developed by websanova. For more Advanced Usages, please check the demo page or visit the official website.