HTML graffiti function, and data transfer to the background

var C=document.getelementbyid ("MyCanvas"), Var cxt=c.getcontext ("2d"), cxt.linewidth=5;cxt.strokestyle= "#000000"; cxt.lock=false;$ ("#myCanvas"). MouseDown (function (e) {cxt.beginpath ();//Clear empty path cxt.lock=true;var Mousepos = Getmousepos (c, E); Cxt.moveto (MOUSEPOS.X,MOUSEPOS.Y); This.setcapture && this.setcapture (); return false;// document.getElementById ("Xycoordinates"). innerhtml= "Coordinates: (" + x + "," + y + ")";} "; Document.onmousemove = function (e) {if (Cxt.lock) {var mousepos = Getmousepos (c, e); var x=mousepos.x;var y=mousepos.y; Cxt.lineto (x, y); Cxt.stroke (); return false;}} $ ("Body"). MouseUp (function (e) {cxt.lock=false;cxt.closepath ();//closed path return true;//document.getElementById (" Xycoordinates "). innerhtml=" Coordinates: ("+ x +", "+ y +") ";}"; $ ("#submitimage"). Click (function () {$ ("#imageurl"). Val (C.todataurl ());}); /canvas Mouse positioning function Getmousepos (canvas, evt) {var rect = Canvas.getboundingclientrect (); return {x:evt.clientx- Rect.left * (canvas.width/rect.width), Y:evt.clienty-reCt.top * (canvas.height/rect.height)}}//color value var = new Array ("#000000", "#0066FF", "#6600FF", "#993366", "#33CC66", "#FF3300"); for (var i=0; $ ("#selectcolor li"). EQ (i). Val () ==0;i++) {$ ("#selectcolor li"). EQ (i). CSS ("Background-color" , Color[i]);} Color Select $ ("#selectcolor li"). Click (function () {cxt.strokestyle=$ (this). CSS ("BackgroundColor");}); /Brush Size $ ("#pensize li"). Click (function () {if (this). Text () = = "Thin") {cxt.linewidth=5;} else if ($ (this). Text () = = "Medium") {cxt.linewidth=10;} else{cxt.linewidth=15;}}); $ ("#canvasreset"). Click (function () {cxt.clearrect (0, 0, c.width, c.height);//Clear the canvas, the upper left corner is the start});

　　

HTML graffiti function, and data transfer to the background