How to create online drawing app? With jQuery dRawr, for example!

jQuery dRawr is online drawing jquery plugin to turn any canvas element into a drawing area with a lot of useful tools and brushes.

Build your online Photoshop with jQuery dRawr 🙂

The dRawr library makes use of JavaScript (jQuery) and Canvas to create a customizable, mobile-friendly drawing app. There is a Photoshop-like toolbar, containing useful tools.

Main features (tools): Airbrush, Brush, Eraser, Eyedropper, Filled Square, Marker, Move, Pencil, Square, Text, Custom tool & brush, Color picker, Image zoom, Image export/import and more.

Screenshot:

jQuery dRawr plugin
jQuery dRawr plugin

What do to with created image?

Process, share and/or save. For this check out the topic of HTML5 canvas data. Load and edit? Sure, use your imagination.

Setup

x

Sample

<div style="width:400px; height:300px;" class="my-container">
  <canvas id="canvas"></canvas>
</div>

$("#canvas").drawr({ "enable_tranparency" : true, "canvas_width" : 800, "canvas_height" : 800 });
$("#canvas").drawr("start");

License: MIT

Homepage and docs

https://rawrfl.es/jquery-drawr

GitHub

https://github.com/lieuweprins/jquery-drawr

See also

iPicture – tooltip your photos

MagnigierRentgen – a jQuery plugin for magnifying images (x-ray)

TagCanvas – HTML5 canvas tag cloud

Enjoy!