Create A Simple Drawing App Using jQuery and Html5 Canvas - Simple Draw

Simple Draw is a small sketchpad web app built with jQuery and Html5 canvas to provide online paint/drawing using touch or mouse. Comes with a color picker which allows the visitor to customize the color of the brush.

See also:

• jQuery Plugin for Simple Drawing Surface - wPaint
• Extensible Html5 Drawing Widget - Literally
• Canvas Based Drawing Plugin with jQuery - Sketch

How to implement:

1. Include the required CSS file in the head section of your page.

<link rel="stylesheet" href="css/style.css" type="text/css">

2. Create an Html5 Canvas element for the sketchpad app.

<canvas	width="600" height="400"></canvas>

3. Create controls for the sketchpad app.

<div class="controls">
<ul>
<li class="red selected"></li>
<li class="blue"></li>
<li class="yellow"></li>
</ul>
<button id="revealColorSelect">New Color</button>
<div id="colorSelect"> <span id="newColor"></span>
<div class="sliders">
<p>
<label for="red">Red</label>
<input id="red" name="red" type="range" min=0 max=255 value=0>
</p>
<p>
<label for="green">Green</label>
<input id="green" name="green" type="range" min=0 max=255 value=0>
</p>
<p>
<label for="blue">Blue</label>
<input id="blue" name="blue" type="range" min=0 max=255 value=0>
</p>
</div>
<div>
<button id="addNewColor">Add Color</button>
</div>
</div>
</div>

4. Include the jQuery javascript library and the app.js at the end of your page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="js/app.js" type="text/javascript" charset="utf-8"></script>

---

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