drawr.min.js

var COLOR,SIZE,drawr=function(e,t){var n={start:function(n){var o=document.getElementById(n.id),i=o.getContext("2d"),r=n.w||window.innerWidth,a=n.h||window.innerHeight;o.width=r,o.height=a;var d={},c=!1,l=o.offsetLeft,u=o.offsetTop;o.addEventListener("touchstart",function(n){n.preventDefault(),void 0!==e&&void 0!==t?(console.log(e+" "+t),c=!0,console.log(c),d.x=n.targetTouches[0].pageX-l,d.y=n.targetTouches[0].pageY-u):console.log("no drawing properties set")}),o.addEventListener("touchmove",function(n){n.preventDefault();var o={x:n.targetTouches[0].pageX-l,y:n.targetTouches[0].pageY-u};c&&drawr.ctx(d.x,d.y,o.x,o.y,e,t,i),d.x=o.x,d.y=o.y}),o.addEventListener("touchend",function(e){e.preventDefault(),c=!1}),o.addEventListener("mousedown",function(n){void 0!==e&&void 0!==t?(console.log(e+" "+t),c=!0,console.log(c),d.x=n.pageX-l,d.y=n.pageY-u):console.log("no drawing properties set")}),o.addEventListener("mousemove",function(n){var o={x:n.pageX-l,y:n.pageY-u};c&&drawr.ctx(d.x,d.y,o.x,o.y,e,t,i),d.x=o.x,d.y=o.y}),o.addEventListener("mouseup",function(e){c=!1}),o.addEventListener("mouseleave",function(e){c=!1})},newLayer:function(e){var t=document.getElementById(e.id),o=document.createElement("CANVAS");o.className=e.classname||"",o.id=e.newId,o.zIndex=e.zIndex,t.appendChild(o),n.start({id:o.id,w:e.w,h:e.h})},colorPicker:function(e){var t,n,o,i=document.getElementById(e.id).getContext("2d").getImageData(e.x,e.y,1,1).data;function r(e){var t=e.toString(16);return 1==t.length?"0"+t:t}return t=i[0],n=i[1],o=i[2],"#"+r(t)+r(n)+r(o)},rect:function(e){var t=document.getElementById(e.canvas).getContext("2d"),n={x:e.x,y:e.y},o={x:e.xx,y:e.yy},i={x:n.x,y:n.y},r={w:o.x-n.x,h:o.y-n.y};o.x<n.x?(i.x=o.x,r.w=n.x-o.x):o.y<n.y&&(i.y=o.y,r.h=n.y-o.y),t.beginPath(),t.lineWidth=e.lineWidth||1,t.strokeStyle=e.lineColor||"",t.rect(i.x,i.y,r.w,r.h),t.stroke(),e.fillColor&&(t.fillStyle=e.fillColor,t.fill())},draw:function(n,o){e=n,t=o},ctx:function(e,t,n,o,i,r,a){var d=a;d.lineJoin="round",d.beginPath(),d.moveTo(e,t),d.lineTo(n,o),d.closePath(),d.strokeStyle=i,d.lineWidth=r,d.stroke()},clear:function(e){var t=document.getElementById(e.id);t.getContext("2d").clearRect(0,0,t.width,t.height)}};return n}(COLOR,SIZE);