HTML5 Drawing Tools - simple javascript class

This is basically a javascript class you can insert into your project that will draw a SVG canvas on your container element and allow you to draw basic shapes with your mouse.

• lightweight
• unobfuscated code
• extendable
• cross browser support (all new versions)
• uses jQuery, Raphael, modernizr, SVG and HTML 5

It's really simple. Load the assets in you project and you are ready to go.

Step 1. - Loading the assets

    <link href="css/app.css" rel="stylesheet" type="text/css" media="all">
    <script src="js/modernizr.js"></script>
    <script src="js/browser.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/raphael.js"></script>
    <script src="js/helper.js"></script>
    <script src="js/app.js"></script>

Step 2. - Create your container element

    <div id="canvas-holder"></div>

Step 3. - Optional, create controls. The tool selecting options should not be changed, colour and stroke width values can be modified to suit your needs.

    <p>Select tool:
        <input type="radio" name="tool" value="rect"> rectangle
        <input type="radio" name="tool" value="elli"> ellipse
        <input type="radio" name="tool" value="angle"> angle
        <input type="radio" name="tool" value="hand"> pencil
        <input type="radio" name="tool" value="arrow" checked="checked"> pencil with arrow
    </p>
    <p>Select colour:
        <span class="color" style="background-color: #ff0000;"></span>
        <span class="color" style="background-color: #00ff00;"></span>
        <span class="color" style="background-color: #0000ff;"></span>
        <span class="color" style="background-color: #ffff00;"></span>
        <span class="color" style="background-color: #ffa904;"></span>
        <span class="color" style="background-color: #04ffbb;"></span>
        <span class="color" style="background-color: #04d9ff;"></span>
        <span class="color" style="background-color: #04a9ff;"></span>
        <span class="color" style="background-color: #048cff;"></span>
        <span class="color" style="background-color: #a904ff;"></span>
        <span class="color" style="background-color: #ffa904;"></span>
        <span class="color" style="background-color: #ff04b5;"></span>
        <span class="color" style="background-color: #ff0457;"></span>
        <span class="color" style="background-color: #ffffff;"></span>
        <span class="color" style="background-color: #000000;"></span>
    </p>
    <p>
        Select stroke width
        <select name="stroke-width">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="4" selected="selected">4</option>
            <option value="6">6</option>
            <option value="10">10</option>
        </select>
    </p>
    <p><button class="clear-all">clear all</button></p>

Step 4. -That's all folks!

You can always check the app.html in the package which is basically a working demo.

The HTML structure is just a sample. Obviously you will use your own styles and possibly different elements so this is just to show you how to bind events to the tool.

Customizing the tool is not so hard if you have some level of javascript/jQuery knowledge. Feel free to modify or improve it.

Version 1.0

This is the first stable version of the tool

Thanks to the following libraries that made this possible

• jQuery
• Raphael
• modernizr

You can contact me in the comment section on code canyon for anything.