HTML5 Canvas Artboard

<!doctype html> 
document.getElementById (ID): ID;}; this.canvas=this.$ ("Canvas"); if (this.canvas.getContext) {} else {alert ("Your browser does not support canvas labels"); return;} this.cxt=this.canvas.getcontext (' 2d '); This.cxt.lineJoin = "Round";//context.linejoin-Specifies how two segments are connected This.cxt.lineWidth = 5;//line width this.iptclear=this.$ (" Clear "); this.revocation=this.$ ("revocation"); this.imgurl=this.$ ("Imgurl");//Picture Path button this.w=this.canvas.width;//The width of the canvas to take the height of the canvas This.touch = ("Createtouch" in document);//Determine if this is a handheld device. Startevent = This.touch? "Touchstart": "MouseDown";//support touch use the corresponding event instead of this. Moveevent = This.touch?
 "Touchmove": "MouseMove"; EndEvent = This.touch? "Touchend": "MouseUp"; This.bind (); }, Bind:function () {var t=this;/* Clear canvas */this.iptclear.onclick=function () {t.clear ();};/* Mouse down event, record mouse position. and draw, unlock lock, open MouseMove event */this.canvas[' on ' +t.startevent]=function (e) {var touch=t.touch? e.touches[0]: E; var _x= touch.clientx-touch.target.offsetleft;//The x-coordinate of the mouse on the canvas, and the upper-left corner of the canvas as the start var _y=touch.clienty-touch.target.offsettop;// The y-coordinate of the mouse on the canvas, with the upper-left corner of the canvas as the starting point if (t.iseraser) {/* t.cxt.globalcompositeoperation = "Destination-out"; T.cxt.beginpath (); T.cxt.arc (_x, _y,t.eraserradius, 0, Math.PI * 2); T.cxt.strokestyle = "Rgba (250,250,250,0)"; T.cxt.fill (); T.cxt.globalcompositeoperation = "Source-over"; */T.reseteraser (_x,_y,touch); }else {t.movepoint (_x,_y);//Record mouse position t.drawpoint ();//Draw route} T.lock=true; }; /* Mouse Move Event */this.canvas[' on ' +t.moveevent]=function (e) {e.stoppropagation ();////////////////////////////////////// Suppress bubbling event/////////////////////////////////////////var Touch=t.touch? 
 E.touches[0]: E; if (T.lock)//t.lock is true, run {var _x=touch.clientx-touch.target.offsetleft;//the x-coordinate of the mouse on the canvas, with the upper-left corner of the canvas as the start var _y= touch.clienty-touch.target.offsettop;//the y-coordinate of the mouse on the canvas. Take the upper-left corner of the canvas as the starting point if (t.iseraser) {//if (T.timer) clearinterval (T.timer);//t.timer=setinterval (function () {T.reseteraser (_x, _y,touch); },10); } else {t.movepoint (_x,_y,true);//Record mouse position t.drawpoint ();//Draw Route}}}; this.canvas[' on ' +t.endevent]=function (e) {/* Reset data */t.lock=false; t.x=[]; t.y=[]; t.clickdrag=[]; Clearinterval (T. Timer); T.timer=null; }; This.revocation.onclick=function () {T.redraw ();}; This.changecolor (); This.imgurl.onclick=function () {T.geturl ();}; /* Eraser */this.$ ("Eraser"). Onclick=function (e) {t.iseraser=true; t.$ ("error"). style.color= "Red"; t.$ ("Error"). Innerhtml= "You have used an eraser! Movepoint:function (x,y,dragging) {/* * Add mouse coordinates to their respective arrays */This.x.push (x); This.y.push (y); This.clickDrag.push (y); }, Drawpoint:function (X,y,radius) {for (Var i=0; i < this.x.length; i++)//loop array {this.cxt.beginPath ();//conText.beginpath (), ready to draw a path if (This.clickdrag[i] && i) {//when dragging and i!=0, start drawing lines from the previous point. This.cxt.moveTo (This.x[i-1], this.y[i-1]),//context.moveto (x, y), opens a new path, and specifies the starting point of the path}else{this.cxt.moveTo (this.x[i]- 1, this.y[i]); } this.cxt.lineTo (This.x[i], this.y[i]),//context.lineto (x, y), connect the current point to the specified point with a straight path This.cxt.closePath ();// Context.closepath (), assuming that the current path is open, close it this.cxt.stroke ();//context.stroke (), draw the current path}}, Clear:function () { This.cxt.clearRect (0, 0, THIS.W, this.h);//Clear the canvas, the upper left corner is the starting point}, Redraw:function () {/* revoke */This.cxt.restore ();}, Preventdefault:function (e) {/* block default */var touch=this.touch? E.touches[0]: E; if (This.touch) Touch.preventdefault (); else Window.event.returnValue = false; }, Changecolor:function () {/* for the button join event */var t=this,iptnum=this.$ ("Color"). getElementsByTagName ("input"), fontiptnum= this.$ ("Font"). getElementsByTagName ("input"); for (Var i=0,l=iptnum.length;i<l;i++) {iptnum[i].index=i; Iptnum[i].onclick=function () {t.cxt.save (); T.cxt.strokestyle = t.color[this.iNdex]; T.storagecolor=t.color[this.index]; t.$ ("Error"). style.color= "#000"; t.$ ("Error"). innerhtml= "If there is an error, please use eraser:"; T.cxt.strokestyle = T.storagecolor; T.iseraser=false; }} for (Var i=0,l=fontiptnum.length;i<l;i++) {t.cxt.save (); fontiptnum[i].index=i; fontiptnum[i].onclick=function () {t.changebackground (this.index); t.cxt.linewidth = T.fontweight[this.index]; t.$ ("error"). style.color= "#000"; t.$ ("Error"). innerhtml= "If there is an error, please use the eraser:"; T.iseraser=false; T.cxt.strokestyle = T.storagecolor; }}, Changebackground:function (num) {/* Adds a hint of the brush's thickness to the background color toggle, gray is current */var fontiptnum=this.$ ("Font"). getElementsByTagName ( "Input"); for (Var j=0,m=fontiptnum.length;j<m;j++) {fontiptnum[j].classname= ""; if (j==num) fontiptnum[j].classname= "Grea" ; }}, Geturl:function () {this.$ ("HTML"). Innerhtml=this.canvas.todataurl ();}, Reseteraser:function (_x,_y,touch) {/* Use eraser-Reminder */var t=this; This.cxt.lineWidth = 30; /*source-over by default, the intersecting part is overwritten by the fill (color, gradient, texture) of the drawing drawing, and all browsers pass through */t.cxt.globalcompositeoperation = "DestinatIon-out "; T.cxt.beginpath (); T.cxt.arc (_x, _y, T.eraserradius, 0, Math.PI * 2); T.cxt.strokestyle = "Rgba (250,250,250,0)"; T.cxt.fill (); T.cxt.globalcompositeoperation = "Source-over"}; Paint.init (); })();  </script> <div style= "Clear:both" ></div> </body> 

HTML5 Canvas Artboard