Posted on by Praveen Nair

Coding for fun: JavaScript based simple doodle

Here is a pure JavaScript based, basic drawing tool. It supports both mouse and tap.

Demo URL: https://ninethsense.github.io/code-share/Doodle/

image

001 <html>
002     <head>
003         <meta http-equiv="content-type" content="text/html; charset=utf-8">
004         <style>
005             body {
006                 margin: 0 0;   
007                 overflow:hidden;
008                 cursor:url(pencil1.cur), auto;
009                 touch-action: none;
010             }
011             #d {
012                 display: flex;
013             }
014             #sb {
015                 background-color: #ddd;
016                 box-shadow: 2px 2px 5px;
017                 padding: 2 2;
018                 position:absolute;
019                 top:0;
020                 left:0;
021             }
022             #sb input {
023                 min-width:100px;
024                 min-height:70px;
025             }
026             #sb input {
027                 font-family: Arial, Helvetica, sans-serif;
028                 font-size: 13pt;
029                 font-weight:bold;
030                 cursor: pointer;
031             }
032         </style>
033     </head>
034     <body>
035     <div id="sb">
036         <input type="button" value="C L E A R" id="clear" />
037     </div>
038     <canvas id="d"></div>
039
040     <script>
041         var d = document.getElementById("d");
042         d.width = window.innerWidth;
043         d.height = window.innerHeight;
044         var ctx = d.getContext("2d");
045         ctx.lineWidth = 3;
046         px=0, py=0;clk=false;
047
048   
049         
050         startdraw = function(e) {
051             px = e.clientX - d.offsetLeft;
052             py = e.clientY - d.offsetTop;
053             clk = true; 
054         }
055
056         draw = function(e) {
057             
058             if (clk) {
059                 e = e.touches?e.touches[0]:e;
060                 ctx.beginPath();
061                 ctx.moveTo(px,py);
062                 px = e.clientX - d.offsetLeft;
063                 py = e.clientY - d.offsetTop;
064                 ctx.lineTo(px,py);
065                 ctx.strokeStyle = '#ff0000';
066                 ctx.stroke();
067                 ctx.closePath();
068             }
069         }
070
071         document.getElementById("clear").addEventListener("click", function() {
072             if (confirm("Clear the whiteboard?")) {
073                 ctx.clearRect(0,0,d.width,d.height);
074             }
075         });
076        
077         d.addEventListener("touchstart", startdraw);
078         d.addEventListener("mousemove", draw, false);
079         d.addEventListener("mousedown", startdraw, false);
080         d.addEventListener("touchmove", draw, false);
081         d.addEventListener("mouseup", function() { clk = false });
082         d.addEventListener("touchend", function() { clk = false });
083
084     </script>
085     </body>
086 </html>
View in GitHub | Made with wp-showgithubfile plugin