jQuery Plugin To Draw Shapes with Html5 Canvas Element - drawingshapes

File Size: 89.5KB
Views Total: 6322
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
jQuery Plugin To Draw Shapes with Html5 Canvas Element - drawingshapes

drawingshapes is a javascript plugin built with jQuery and paper.js that allows you to draw shapes (circle or lines) within an DOM element using Html5 Canvas element.

Basic Usage:

1. Include jQuery library and paper.js on the web page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/paper.js"></script>

2. The javascript for circle tool.

<script type="text/paperscript" canvas="canvas-circle">
document.getElementById('canvas-circle').style.display = 'none';
document.getElementById('button-circle').style.display = 'none';
function onMouseDrag(event) {
var path = new Path.Circle({
center: event.downPoint,
radius: (event.downPoint - event.point).length,

strokeColor: 'red'


document.getElementById('clear').addEventListener('click', function() {
}, true);


3. The Html.

<canvas id="canvas-circle" class="toggle-circle"></canvas>

<div id="button-circle" class="toggle-circle">
<input type="button" id="clear" value="Clear">

4. Create a button to toggle the circle tool.

<div id="clicktotoggle-circle">
<button class="toggler-circle">Circle Tool Off</button>

5. The javascript for the toggle button.

$(this).html($(this).html() == "Circle Tool On" ? "Circle Tool Off" : "Circle Tool On");

6. The javascript for DIV toggle.


This awesome jQuery plugin is developed by gklockwood. For more Advanced Usages, please check the demo page or visit the official website.