jQuery Plugin to Enable Drawing on HTML5 Canvas – jQuery sketchIt

A simple, easy-to-use jQuery & HTML5 Canvas-based plugin that enables simple drawing functionality on an automatically generated html5 canvas.

How to Use SketchIt for Drawing HTML5 Canvas:

1. First of all, load the jQuery, jQuery Mobile & UI, and sketchIt into an HTML document.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<!-- jQuery Mobile -->
<script src="https://code.jquery.com/mobile/1.5.0-rc1/jquery.mobile-1.5.0-rc1.min.js"></script>

<!-- jQuery UI -->
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

2. Also, include the sketchIt javascript and CSS files on your page.

<!-- sketchIt Js -->
<script src="src/jquery.sketchIt.min.js"></script>

<!-- sketchIt CSS -->
<link rel="stylesheet" type="text/css" href="index-src/main.css">

3. Create a container, a div element with the unique id in which you want to load sketchIt drawing board.

<div id="drawing"></div>

4. Initialize the plugin in the jQuery document ready function with the div id selector.

$(document).ready(function(){

$('#drawing').sketchIt();

});

5. To enable drawing tools, put the following option true. Default: false, type: bool

$('#drawing').sketchIt({
   tools:true,
});

6. To change the color on plugin initialization. Default: black, type: string

$('#drawing').sketchIt({
   color: 'green'
});

7. To style the drawing board, the basic CSS is as follows.

#drawing {
    height: 200px;
}
#tools {
    position: fixed;
    z-index: 1000;
    top: 60px;
    right: 60px;
}
#tools {
    background-color: #ddd;
    color: #565656;
    width: 62px;
    font-family: Arial, Sans-serif;
    font-size: 0.85em;
}
#tools i {
    padding: 3px;
    display: block;
}
#tools * {
    margin:0px;
    padding:0px;
}
#tools ul {
    clear: both;
}
#tools li {
    list-style-type:none;
    min-width: 50px;
    min-height: 50px;
    padding: 5px;
    position: relative;
    background-color: #ddd;
    text-align:center;
}
#tools span {
    display: block;
    border: 1px solid #bbb;
    width: 50px;
    height: 50px;
    background-color: #ddd;
}
span.text {
    font-size: 3.3em;
}
#tools li ul {
    display:none;
    position: relative;
    left: -60px;
    top: 0px;
    z-index: 1000;
}
#tools li:hover {
    background-color: #bbb;
}
#tools li:hover span {
    border-color: #999;
}
#tools li:hover>ul {
    display:block !important;
    position: absolute;
}
#tools .current {
    background-color: #bbb;
}
.catview {
    border: 0px !important;
}

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.