JavaScript Simple Artboard

HTML 5 canvas is just a container that wants to draw everything that relies on javascript. It feels like nothing can be separated from this JavaScript script.

Simple Artboard Core code:

<Script>        varStart= false;//does the draw switch start?window.onload= function(){            varCVS=document.getElementById ("CVS"); varCXT=Cvs.getcontext ("2d"); //Mouse presses on the artboardCvs.onmousedown= function(){                //1. Get the coordinates of the mouse                varx=Event.offsetx; vary=event.offsety; //2. Move the brush to the current positionCxt.moveto (x, y); //3. Turn on the draw switchStart= true; //4. Get and set the brush color                varColor=document.getElementById ("Color"). Value; Cxt.strokestyle=color; //5. Reset the pathCxt.beginpath (); //6. Block Default ProgramsEvent.preventdefault (); }            //Mouse moves on the artboardCvs.onmousemove= function(){                if(start) {//1. Get the new coordinates of the mouse                    varx=Event.offsetx; vary=event.offsety; //2. Draw the line to that positionCxt.lineto (x, y);                Cxt.stroke (); }                            }            //Mouse ReleaseCvs.onmouseup= function(){                //1. Turn off the draw switchStart= false; //2. Close the path of the brushCxt.closepath (); }            //move the mouse out of the artboardCvs.onmouseout= function(){                //1. Turn off the draw switchStart= false; //2. Close the path of the brushCxt.closepath (); }        }  </Script>

As follows:

JavaScript Simple Artboard