Photoshop Style Drawing App With jQuery And Canvas - dRawr

File Size: 113 KB
Views Total: 8739
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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.


  • Airbrush tool.
  • Brush tool.
  • Eraser tool.
  • Eyedropper tool.
  • Filled Square tool.
  • Marker tool.
  • Move tool.
  • Pen tool.
  • Pencil 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="" 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.


6. Enable the drawing mode and done.


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

  "canvas_width": 600, 
  "canvas_height": 600

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

  "enable_tranparency": false

9. Specify how many times can you undo.

  "undo_max_levels" : 5

10. Specify the color picker mode.

  "color_mode" : "picker" // or presets

11. Clear the canvas on init.

  "clear_on_init" : true

12. Stop the drawing mode.


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.




  • bugfix


  • reenable 3d touch


  • limit zoom speed



  • 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.