Minimal Drawing App With Canvas And JavaScript - Drawboard

Drawboard is a tiny jQuery based drawing web app where you can draw any shapes and smooth signatures on a canvas using mouse click and drag.

How to use it:

1. Load the Drawboard's files in your HTML document which has jQuery library loaded.

<link rel="stylesheet" href="drawing-table.css" />
<script src="jquery.min.js"></script>
<script src="drawing-table.js"></script>

2. Create an HTML canvas element for the drawing app.

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

3. Create controls from which you can choose a brush color for the drawing app.

<div id="controls">
  <ul>
    <li class="red selected"></li>
    <li class="blue"></li>
    <li class="yellow"></li>
  </ul>
</div>

4. You can also create a color picker that allows the user to customize the brush color.

<div id="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">
    <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>
      <span id="newColor"></span>
    </div>
    <div>
      <button id="addNewColor">Add Color</button>
    </div>
  </div>
</div>

---

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