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 Preview

HTML5 Canvas Draw Shapes with Mouse - JQuery dRawr

How to start using jQuery?
More jQuery Top, Best and New Plugins
Top 100 jQuery Plugins

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

Demo Download

Main Features

Drawing area (whiteboard & transparent)
Extensible brush system
Custom buttons
Loading and saving images
Excellent mobile support
Basic pen pressure support for samsung and apple devices
planned:
Wacom tablet support
Undo/Redo
Support for other icon fonts like font awesome
Text insertion
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

EXAMPLE

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

canvas_width

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

EXAMPLE

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

hasModal

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

EXAMPLE

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

Similar Code Snippets:

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.

HTML5 Canvas Draw Shapes with Mouse – jQuery dRawr

Plugin Preview

Plugin Overview

Main Features

How to Make HTML5 Canvas Draw Shapes with Mouse

Advance Configuration Options for HTML5 Canvas Draw

Similar Code Snippets:

Leave a Comment Cancel reply