Simple Drawing Application Using jQuery

Submitted by: 
Language: 
Visitors have accessed this post 610 times.

In this tutorial we will create a simple drawing application using jQuery. This tutorial will teach you on how to deal with HTML 5 canvas. Canvas is a HTML element which can be used to draw graphics using javascript scripting. This can be used to draw graphs, make photo composition or simple animations. This time we will try to apply jQuery library to this application. Let's start coding!

Creating A Mark
This will display the canvas work space to draw something. To do that copy/paste the code below then name it 'index.html'

  1. <!DOCTYPE html>
  2. <html lang = "en">
  3. <head>
  4. <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css" />
  5. <link rel = "stylesheet" type = "text/css" href = "css/font-awesome.css" />
  6. <link rel = "stylesheet" type = "text/css" href = "css/colorPicker.css" />
  7. <link rel = "stylesheet" type = "text/css" href = "css/style.css" />
  8. <meta charset = "UTF-8" name = "viewport" content = "width=device-width, initial-scale=1" />
  9. </head>
  10. <nav class = "navbar navbar-default">
  11. <div class = "container-fluid">
  12. <a class = "navbar-brand" href = "<a href="https://sourcecodester.com">Sourcecodester</a>
  13. " rel="nofollow">https://sourcecodester.com">Sourcecodester</a>
  14. </a> </div>
  15. </nav>
  16. <div class = "row">
  17. <div class = "col-md-3"></div>
  18. <div class = "col-md-6 well ">
  19. <h3 class = "text-primary">Simple Drawing Application Using Jquery</h3>
  20. <hr style = "border-top:1px dotted #000;"/>
  21. <div id = "drawing">
  22. <ul class = "pull-left">
  23. <li><button class = "btn btn-success" id = "clear"><span class = "glyphicon glyphicon-refresh"></span></button></li>
  24. <li><button type = "button" class = "btn btn-lg btn-default"><input id="color" type="text" value="#000000" /></button></li>
  25. </ul>
  26. <canvas width = "600px" height = "400px" id = "canvas"></canvas>
  27. </div>
  28. </div>
  29. </div>
  30. </body>
  31. <script src = "js/jquery-3.1.1.js"></script>
  32. <script src = "js/bootstrap.min.js"></script>
  33. <script src = "js/jquery.colorPicker.js"></script>
  34. <script src = "js/script.js"></script>
  35. </html>

Adding Some Style
We will add some css style for the canvas. Copy/paste the given code below and save it inside the css folder name 'style.css'

  1. ul{
  2. left:-42px;
  3. position:relative;
  4. list-style-type:none;
  5. }
  6.  
  7. ul li{
  8. display:inline;
  9. }
  10.  
  11. #drawing{
  12. width:600px;
  13. height:520px;
  14. margin:auto;
  15. }
  16.  
  17. #canvas{
  18. border:1px solid #000;
  19. background-color:#fff;
  20. }
  21.  
  22. #canvas:hover{
  23. cursor: url('../cursor/cursor.cur'), auto;
  24. }

Creating The jQuery Script
This will handle the drawing function of the cursor, when the user pressing and holding the mouse within the canvas area. To create the function just copy/paste the code below then save it inside the js folder name 'script.js'

  1. $(document).ready(function(){
  2. $canvas = $('#canvas');
  3. $context = $canvas[0].getContext('2d');
  4. $('#color').colorPicker();
  5. $color = "#000000";
  6. $('#color').change(function(){
  7. $color = $('#color').val();
  8. });
  9.  
  10.  
  11. $('#clear').on('click', function(){
  12. $context.fillStyle = "#ffffff";
  13. $context.fillRect(0, 0, canvas.width, canvas.height);
  14. });
  15.  
  16. $lastEvent = "";
  17. $mouseDown = false;
  18. $canvas.mousedown(function(e){
  19. $lastEvent = e;
  20. $mouseDown = true;
  21. }).mousemove(function(e){
  22. if($mouseDown) {
  23. $context.beginPath();
  24. $context.moveTo($lastEvent.offsetX, $lastEvent.offsetY);
  25. $context.lineTo(e.offsetX, e.offsetY);
  26. $context.strokeStyle = $color;
  27. $context.stroke();
  28. $lastEvent = e;
  29. }
  30. }).mouseup(function(){
  31. $mouseDown = false;
  32. }).mouseleave(function(){
  33. $canvas.mouseup();
  34. });
  35.  
  36.  
  37. });

There you have it we created a simple drawing application by using jQuery. I hope that this tutorial help you to your projects. For more update and tutorials just visit this site. Enjoy Coding!!


Tags: 

Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <th> <img> <h1> <h2> <h3> <iframe>
  • You may insert videos with [video:URL]
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <html4strict>, <java>, <javascript>, <mysql>, <php>, <python>, <sql>, <vb>, <vbnet>. The supported tag styles are: <foo>, [foo].
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.