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'
});

path.removeOnDrag();
};

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

</script>

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">
</div>

4. Create a button to toggle the circle tool.

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

5. The javascript for the toggle button.

<script>
$(document).ready(function(){
$("button.toggler-circle").click(function(){
$("#clicktotoggle-circle").toggleClass("maximize");
$(this).html($(this).html() == "Circle Tool On" ? "Circle Tool Off" : "Circle Tool On");
});
});
</script>

6. The javascript for DIV toggle.

<script>
$(document).ready(function(){
$("#clicktotoggle-circle").click(function(){
$(".toggle-circle").toggle();
});
});
</script>

---

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