HTML5 Canvas Draw Shapes with Mouse – jQuery dRawr

jQuery dRawr is a jquery and HTML5 canvas based drawing plugin that lets users to draw shapes with mouse. The plugin comes with a lot of useful tools and brushes. The drawing board wrap around HTML5 canvas element and generates all necessary tools (i.e pencil, pen, eraser, spray paint, color picker, mover etc.) to draw shapes.

Plugin Overview

Plugin: JQuery dRawr
Author: Lieuwe
Licence: MIT Licence
Published: May 9, 2019
Repository: Fork on GitHub
Dependencies: jQuery 2.3.1 or Latest version and Material Design Icons

File Type: zip archive (HTML, CSS & JavaScript)
Package Size: 18.29 KB

Main Features

  1. Drawing area (whiteboard & transparent)
  2. Extensible brush system
  3. Custom buttons
  4. Loading and saving images
  5. Excellent mobile support
  6. Basic pen pressure support for samsung and apple devices
  7. planned:
  8. Wacom tablet support
  9. Undo/Redo
  10. Support for other icon fonts like font awesome
  11. Text insertion
  12. An much .

How to Make HTML5 Canvas Draw Shapes with Mouse

1. Create HTML5 canvas element with a unique id and wrap it into a div with your desired width & height property.

<div id="drawr-container" style="margin:20px auto;width:350px;height:350px;border:2px dotted gray;">
	<canvas class="demo-canvas"></canvas>
</div>

2. After this, load the jQuery JavaScript library and Material Design Icons into HTML document.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

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

3. Initialize the plugin in jQuery document ready function with all default settings.

$(document).ready(function(){

   $("#drawr-container .demo-canvas").drawr();

});

Advance Configuration Options for HTML5 Canvas Draw

The following are some advance configuration options to create / customize “HTML5 Canvas Draw”.

enable_tranparency

This option enable / disable transparent mode for drawing board. Default: false, Type: Boolean

$("#drawr-container .demo-canvas").drawr({
   "enable_tranparency" : true,
});
canvas_width

Define the width property for target HTML5 canvas. Type: Number

$("#drawr-container .demo-canvas").drawr({
   "canvas_width" : 800,
});
hasModal

Define the height property for target HTML5 canvas. Type: Number

$("#drawr-container .demo-canvas").drawr({
    "canvas_height" : 800
});