Photoshop Style Drawing App With jQuery And Canvas - dRawr

The dRawr library makes use of JavaScript (jQuery) and Canvas to create a customizable, mobile-friendly drawing app with a Photoshop-style toolbar containing useful tools on the screen.

Features:

• Airbrush tool.
• Brush tool.
• Burn tool.
• Dodge tool.
• Effects
• Ellipse tool.
• Eraser tool.
• Eyedropper tool.
• Fill tool.
• Filled Ellipse tool.
• Filled Square tool.
• Line tool.
• Marker tool.
• Move tool.
• Pen tool.
• Pencil tool.
• Redo tool.
• Rotate tool.
• Save tool.
• Settings tool.
• Sharpen tool.
• Smudge tool.
• Square tool.
• Text tool.
• Custom tool & brush.
• Color picker.
• Image zoom.
• Image export/import.

How to use it:

1. Load the Material Design icons for the tools.

<link href="https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/3.6.95/css/materialdesignicons.css" rel="stylesheet">

2. Load the jQuery dRawr plugin after the latest jQuery library.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="dist/jquery.drawr.combined.js"></script>

3. Or load the core JavaScript and tools of your choice as follows:

<script src="src/jquery.drawr.js"></script>
<script src="src/tools/toolName.js"></script>

4. Create an HTML5 canvas element for the drawing app.

<canvas id="canvas"></canvas>

5. Initialize the drawing app by calling the function on the canvas element.

$(function(){
  $("#canvas").drawr();
});

6. Enable the drawing mode and done.

$("#canvas").drawr("start");

7. Customize the height/width of the canvas element.

$("#canvas").drawr({
  "canvas_width": 600, 
  "canvas_height": 600
});

8. Determine whether to display a transparent background. Default: true.

$("#canvas").drawr({
  "enable_tranparency": false
});

9. Specify how many times can you undo.

$("#canvas").drawr({
  "undo_max_levels" : 5
});

10. Specify the color picker mode.

$("#canvas").drawr({
  "color_mode" : "picker" // or presets
});

11. Clear the canvas on init.

$("#canvas").drawr({
  "clear_on_init" : true
});

12. Stop the drawing mode.

$("#canvas").drawr("stop");

13. Load an image file to the drawing app.

$("#canvas").drawr("load", file);

14. Export the image and specify the MIME type.

$("#canvas").drawr("export", "image/jpeg");

15. Add custom buttons(tools) to the toolbar.

$("#canvas").drawr("button", {
  "icon":"mdi mdi-content-save mdi-24px"
})

16. Destroy the instance.

$("#canvas").drawr("destroy")

Changelog:

v0.9.12 (2026-03-16)

• disable antialiasing, which doesn't look great zoomed in, and lowers performance
• only pen and brush have smoothing enabled
• disable pressure calculations on desktop
• add Linesmoothing.
• Dual color picker.
• New settings: paper_color, paper_color_mode.
• New function: activate_tool.
• New functions: center, zoom.
• Properly namespace events to fix destroy issues.
• Combined effects brushes into a single tool, added noise tool.

v0.9.5 (2026-03-15)

• Adds debug mode
• Allow selection of paper color
• deprecates enable_transparency_image
• Scrollbars now take rotation and overscroll into account properly
• Pinch/pan with touch now rotates around pinch midpoint
• Clicking on button no longer moves toolwindow
• Corrects clear_on_init behaviour
• Added dropdown button support
• Implemented a paper color setting

2026-03-12

• Fixed issues with touch events on mobile devices

2026-03-12

• pointer events,wacom support,new tools bugfixes

2026-03-10

• Added more tools

2026-03-09

• Fix tool names. Fix eyedropper tool not updating color picker. Fix color picker being broken. Make color picker work without pressing ok.

2026-03-07

• fix wrong detection of pressure values when using touch

2026-03-03

• pinch to zoom and two finger drag, optimize draw_animations, fix issues with line tool and toolwindow dragging, attempt to fix ios issues, fix transparency grid wobblyness

2026-03-02

• Fix line tool preview line width

2026-03-01

• Added line tool

2023-05-14

• bugfix

2021-09-09

• reenable 3d touch

2021-09-09

• limit zoom speed

2021-09-08

• JS & CSS update

2019-05-28

• JS & CSS update

---

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