|
| 1 | +var draw = function(){ |
| 2 | + |
| 3 | + // get canvas element |
| 4 | + var canvas = document.getElementById("canvas"); |
| 5 | + |
| 6 | + // set context to use properties |
| 7 | + var context = canvas.getContext("2d"); |
| 8 | + |
| 9 | + // set canvas width and height to window size |
| 10 | + canvas.width = window.innerWidth; |
| 11 | + canvas.height = window.innerHeight; |
| 12 | + |
| 13 | + // check if mouse button is pressed |
| 14 | + var down = false; |
| 15 | + |
| 16 | + // initialize all entities related to brush size |
| 17 | + var maxbs = 50, |
| 18 | + minbs = 0.5, |
| 19 | + setbs = document.getElementById("bsize"), |
| 20 | + inc = document.getElementById("inc"), |
| 21 | + dec = document.getElementById("dec"); |
| 22 | + bs = 15; |
| 23 | + |
| 24 | + // load all the div as an array |
| 25 | + var shade = document.getElementsByClassName("shade"); |
| 26 | + var n = shade.length; |
| 27 | + |
| 28 | + // load clear, erase and save div |
| 29 | + var clear = document.getElementById("clear"); |
| 30 | + var erase = document.getElementById("erase"); |
| 31 | + var save = document.getElementById("save"); |
| 32 | + |
| 33 | + // e is the event passed |
| 34 | + var drawPoint = function(e){ |
| 35 | + // if mouse button is clicked |
| 36 | + if(down == true){ |
| 37 | + //connect current point with previous point |
| 38 | + context.lineTo(e.clientX, e.clientY); |
| 39 | + context.lineWidth = bs*2; |
| 40 | + context.stroke(); |
| 41 | + |
| 42 | + // create point |
| 43 | + context.beginPath(); |
| 44 | + context.arc(e.clientX, e.clientY, bs, 0, 2*Math.PI); |
| 45 | + |
| 46 | + // fill the point |
| 47 | + context.fill(); |
| 48 | + |
| 49 | + // connect this point to next point |
| 50 | + context.beginPath(); |
| 51 | + context.moveTo(e.clientX, e.clientY); |
| 52 | + } |
| 53 | + } |
| 54 | + |
| 55 | + var upordown = function(e){ |
| 56 | + if(down == true){ |
| 57 | + // mouse button is unclicked |
| 58 | + down=false; |
| 59 | + |
| 60 | + // clear previous path by starting new path |
| 61 | + context.beginPath(); |
| 62 | + } |
| 63 | + else{ |
| 64 | + // mouse button is clicked |
| 65 | + down = true; |
| 66 | + |
| 67 | + // draw point on the click |
| 68 | + drawPoint(e); |
| 69 | + } |
| 70 | + } |
| 71 | + |
| 72 | + // add mouse movement listeners |
| 73 | + canvas.addEventListener('mousedown',upordown); |
| 74 | + canvas.addEventListener('mousemove',drawPoint); |
| 75 | + canvas.addEventListener('mouseup',upordown); |
| 76 | + |
| 77 | + // decrese brush size by half |
| 78 | + var decbs = function(){ |
| 79 | + |
| 80 | + var newbs = bs-5; |
| 81 | + |
| 82 | + if(newbs < minbs) bs=minbs; |
| 83 | + else if(newbs > maxbs) bs=maxbs; |
| 84 | + else bs = newbs; |
| 85 | + |
| 86 | + //// set the changed radius in toolbar |
| 87 | + setbs.innerHTML = bs; |
| 88 | + } |
| 89 | + |
| 90 | + // increase brush size twice |
| 91 | + var incbs = function(){ |
| 92 | + |
| 93 | + var newbs = bs+5; |
| 94 | + |
| 95 | + if(newbs < minbs) bs=minbs; |
| 96 | + else if(newbs > maxbs) bs=maxbs; |
| 97 | + else bs = newbs; |
| 98 | + |
| 99 | + // set the changed radius in toolbar |
| 100 | + setbs.innerHTML = bs; |
| 101 | + } |
| 102 | + |
| 103 | + // add click listeners to increase and decrease div |
| 104 | + inc.addEventListener('click', incbs); |
| 105 | + dec.addEventListener('click', decbs); |
| 106 | + |
| 107 | + var setcolor = function(e){ |
| 108 | + // get div clicked by obtaining the element which triggered the event with e.target |
| 109 | + var color = e.target; |
| 110 | + |
| 111 | + // change fill and stroke color |
| 112 | + context.fillStyle = color.style.backgroundColor; |
| 113 | + context.strokeStyle = color.style.backgroundColor; |
| 114 | + |
| 115 | + // change the previous color class from active to just shade |
| 116 | + var chkact = document.getElementsByClassName("active")[0]; |
| 117 | + if(chkact) chkact.className = 'shade'; |
| 118 | + |
| 119 | + // set current color active |
| 120 | + color.className += ' active'; |
| 121 | + } |
| 122 | + |
| 123 | + // add click listeners to the divs |
| 124 | + for(var i=0;i<n;i++){ |
| 125 | + shade[i].addEventListener('click',setcolor); |
| 126 | + } |
| 127 | + |
| 128 | + |
| 129 | + // clear the entire canvas |
| 130 | + var clrcan = function(e){ |
| 131 | + context.clearRect(0, 0, canvas.width, canvas.height); |
| 132 | + } |
| 133 | + |
| 134 | + clear.addEventListener('click',clrcan); |
| 135 | + |
| 136 | + // erase parts of canvas |
| 137 | + var eracan = function(e){ |
| 138 | + context.fillStyle = "#fff"; |
| 139 | + context.strokeStyle = "#fff"; |
| 140 | + } |
| 141 | + |
| 142 | + erase.addEventListener('click',eracan); |
| 143 | + |
| 144 | + // save canvas drawing as .png |
| 145 | + var savecan = function(e){ |
| 146 | + e.target.href = canvas.toDataURL(); |
| 147 | + e.target.download = "myDrawIt.png"; |
| 148 | + } |
| 149 | + |
| 150 | + save.addEventListener('click',savecan); |
| 151 | + |
| 152 | +}(); |
0 commit comments