Introduction
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.
Description
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="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://intridea.github.io/sketch.js/lib/sketch.min.js"></script>
<script>
$(function () {
$('#sketch').sketch();
$(".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);
$("#imgc").show();
});
});
</script>
</head>
<body>
<div class="digital">
<a href="#sketch" data-tool="marker">marker</a>
<a href="#sketch" data-tool="remover">remover</a>
</div>
<br/>
<canvas id="sketch" width="600" height="300"></canvas>
<br/>
<input type="button" id="savebtn" value="image save"/>
<img id="imgc" alt="" style="display:none"/>
</body>
</html>
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.
Description
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="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://intridea.github.io/sketch.js/lib/sketch.min.js"></script>
<script>
$(function () {
$('#sketch').sketch();
$(".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);
$("#imgc").show();
});
});
</script>
</head>
<body>
<div class="digital">
<a href="#sketch" data-tool="marker">marker</a>
<a href="#sketch" data-tool="remover">remover</a>
</div>
<br/>
<canvas id="sketch" width="600" height="300"></canvas>
<br/>
<input type="button" id="savebtn" value="image save"/>
<img id="imgc" alt="" style="display:none"/>
</body>
</html>
Code Generate the following output
