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: January 17, 2024
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
});

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...