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

Plugin Overview

Plugin: sketchIt
Author: Gareth Cadwaladr
Licence: MIT Licence
Published: 2019-03-24 08:58:24
Repository: Fork on GitHub
Dependencies: jQuery 2.0.1 or Latest version, jQuery Mobile 1.4.5 and jQuery UI (custom build)
File Type: zip archive (HTML, CSS & JavaScript)
Package Size: 167 KB

How to Use SketchIt for Drawing HTML5 Canvas:

1. First of all, load the jQuery, jQuery Mobile & UI and sketchIt into 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 into 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 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;
}

Be the first to comment

Leave a Reply

Your email address will not be published.


*