Simple Paint Application using HTML5 Canvas

         Paint application is used to draw curves,pictures,import images,etc..Here is a simple Paint App i designed for beginners.This done using HTML and javaScript.Canvas(drawing area) created using Html tags.That is Picturising the window is done by Html tags and the functions done using javaScript.

         JavaScript insert elements from documents using:

                  document.getElementById(id)

   This App includes mouse events.For eg:

   My Paint App View:

     Canvas and buttons are designrd using HTML where the functions are done with JavaSsript.

MouseEvents:

 function events(){b.onmousedown=md;b.onmouseup=mu;b.onmousemove=mv;}  
 function md(e){img=c.getImageData(0,0,b.width,b.height);sX=e.x;sY=e.y;pulse="on";}  
 function mu(e1){eX=e1.x;eY=e1.y;pulse="off";}  
 function mv(e2){mX=e2.x;mY=e2.y;if (pulse=="on"){c.putImageData(img,0,0);draw();}}  

LineTool:

 c.beginPath();c.moveTo(sX,sY);c.lineTo(mX,mY);c.stroke();c.closePath();  

RectangleTool:

 c.strokeRect(sX,sY,mX-sX,mY-sY);c.stroke();if(f==1){c.fillRect(sX,sY,mX-sX,mY-sY);  

CircleTool:

 c.beginPath();c.arc(Math.abs(mX+sX)/2,Math.abs(mY+sY)/2,Math.sqrt(Math.pow(mX-sX,2)+Math.pow(mY-sY,2))/2, 0, Math.PI*2);  
 c.stroke();if(f==1){c.fill();}c.closePath();  

Penciltool:

 c.moveTo(sX,sY);c.lineTo(mX,mY);c.stroke();sX=mX;sY=mY;  

In this way i set function fill() ,Stroke() etc..
For full program: Click here