text: var draw=function(){var t=document.querySelector("main").offsetWidth,e=document.querySelector("main").offsetHeight,n=document.createElement("canvas"),a=n.getContext("2d"),r=n.getBoundingClientRect(),o=0,i=0,d=0,c=0,l=0,s=0,f=!1,h=!1,u="",w=!1;return{setXY:function(t){f=o,h=i,o=t.clientX-r.left-n.offsetLeft,i=t.clientY-r.top-n.offsetTop},writeXY:function(){document.getElementById("trackX").innerHTML="X: "+o,document.getElementById("trackY").innerHTML="Y: "+i},setStart:function(){d=o,c=i},setEnd:function(){l=o,s=i},setShape:function(t){u=t},getShape:function(){return u},setIsDrawing:function(t){w=t},getIsDrawing:function(){return w},draw:function(){a.restore(),"rectangle"===u?this.drawRect():"line"===u?this.drawLine():"path"===u?this.drawPath():"circle"===u?this.drawCircle():alert("Please choose a shape"),a.save()},drawCircle:function(){a.strokeStyle="#"+Math.floor(16777215*Math.random()).toString(16),a.fillStyle="#"+Math.floor(16777215*Math.random()).toString(16);let t=d-l,e=c-s,n=Math.sqrt(t*t+e*e);a.beginPath(),a.arc(d,c,n,0,2*Math.PI),a.stroke(),a.fill()},drawLine:function(){a.strokeStyle="#"+Math.floor(16777215*Math.random()).toString(16),a.beginPath(),a.moveTo(d,c),a.lineTo(l,s),a.stroke()},drawPath:function(){a.strokeStyle="#"+Math.floor(16777215*Math.random()).toString(16),a.beginPath(),a.moveTo(f,h),a.lineTo(o,i),a.stroke()},drawRect:function(){a.fillStyle="#"+Math.floor(16777215*Math.random()).toString(16),a.fillRect(d,c,l-d,s-c)},drawPath:function(){a.strokeStyle="#"+Math.floor(16777215*Math.random()).toString(16),a.fillStyle="#"+Math.floor(16777215*Math.random()).toString(16),a.beginPath(),a.moveTo(d,c),a.lineTo(l,s),a.lineTo(x3,y3),a.fill()},getCanvas:function(){return n},init:function(){n.width=t,n.height=e,document.querySelector("main").appendChild(n)}}}();draw.init(),draw.getCanvas().addEventListener("mousemove",function(t){draw.setXY(t),draw.writeXY(),"path"==draw.getShape()&&!0===draw.getIsDrawing()&&draw.draw()},!1),draw.getCanvas().addEventListener("mousedown",function(){draw.setStart(),draw.setIsDrawing(!0)},!1),draw.getCanvas().addEventListener("mouseup",function(){draw.setEnd(),draw.draw(),draw.setIsDrawing(!1)},!1),document.getElementById("btnRect").addEventListener("click",function(){draw.setShape("rectangle")},!1),document.getElementById("btnLine").addEventListener("click",function(){draw.setShape("line")},!1),document.getElementById("btnCircle").addEventListener("click",function(){draw.setShape("circle")},!1),document.getElementById("btnPath").addEventListener("click",function(){draw.setShape("path")},!1);