Use pen paint tool online using html5 canvas with JQuery

October 01, 2015 , 0 Comments

In this article i will show you how to draw using pencil, i mean to say your mouse cursor behaves like pencil on specific area of web browser. You can draw something on web browser using mouse cursor. Also you can use this for digital signature. Through this article i will explain how to design paint online for drawing something.

In this article i will use Html5 canvas with JQuery. i will use canvas for drawing area and sketch.js file is used for drawing on it. I explained Button working as file upload control using JQuery, Open and close new window using Jquery , event inside event example in JQuery etc.

Source code:

<!DOCTYPE html>
<html xmlns="">
    <script src=""></script>
    <script src=""></script>
        $(function () {

            $(".digital a").eq(0).attr("style", "color:#ddd");
            $(".digital a").click(function () {
                $(".tools a").removeAttr("style");
                $(this).attr("style", "color:#000");

            $("#savebtn").bind("click", function () {
                var base64 = $('#sketch')[0].toDataURL();
                $("#imgc").attr("src", base64);

    <div class="digital">
        <a href="#sketch" data-tool="marker">marker</a>
        <a href="#sketch" data-tool="remover">remover</a>

    <canvas id="sketch" width="600" height="300"></canvas>
    <input type="button" id="savebtn" value="image save"/>
    <img id="imgc" alt="" style="display:none"/>


Code Generate the following output

Jacob Lefore

Some say he’s half man half fish, others say he’s more of a seventy/thirty split. Either way he’s a fishy bastard. Google