<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<script>
var flag=false;
var element;
var ctx;
var color=3;
var firstdotx,firstdoty;
var seconddotx,seconddoty;
var dottab=1;
function hold()
{
flag=true;
element=document.getElementById('drawLine');
ctx=element.getContext('2d');
draw();
}
function release()
{
flag=false;
}
function draw()
{
switch(color){
case 0:
if(ctx && flag){
ctx.beginPath();
ctx.arc(event.x-7, event.y-7, 8, 0, Math.PI*2, false);
ctx.fillStyle="rgb(255, 255, 255)";
ctx.fill();
}
break;
case 1:
if(ctx && flag){
ctx.beginPath();
ctx.arc(event.x-7, event.y-7, 5, 0, Math.PI*2, false);
ctx.fillStyle="rgb(5, 5, 230)";
ctx.fill();
}
break;
case 2:
if(ctx && flag){
ctx.beginPath();
ctx.arc(event.x-7, event.y-7, 5, 0, Math.PI*2, false);
ctx.fillStyle="rgb(230, 5, 5)";
ctx.fill();
}
break;
case 3:
if(ctx && flag){
ctx.beginPath();
ctx.arc(event.x-7, event.y-7, 3, 0, Math.PI*2, false);
ctx.fillStyle="rgb(0, 0, 0)";
ctx.fill();
}
}
}
function red()
{
color=2;
}
function blue()
{
color=1;
}
function white()
{
color=0;
}
function line()
{
if(ctx && flag){
if(dottab==1){
ctx.beginPath();
firstdotx=event.x;
firstdoty=event.y;
ctx.lineWidth=3;
ctx.moveTo(seconddotx-7, seconddoty-7);
ctx.lineTo(firstdotx-7, firstdoty-7);
//ctx.arc(event.x-7, event.y-7, 8, 0, Math.PI*0.1, false);
//ctx.fillStyle="rgb(0, 0, 0)";
//ctx.fill();
ctx.stroke();
dottab=2;
return 0;
}
else if(dottab==2){
ctx.beginPath();
seconddotx=event.x;
seconddoty=event.y;
ctx.lineWidth=3;
ctx.moveTo(firstdotx-7, firstdoty-7);
ctx.lineTo(seconddotx-7, seconddoty-7);
//ctx.arc(event.x-7, event.y-7, 8, 0, Math.PI*0.1, false);
//ctx.fillStyle="rgb(0, 0, 0)";
//ctx.fill();
ctx.stroke();
dottab=1;
return 0;
}
}
}
</script>
</head>
<body>
<canvas id="drawLine" width="300" height="300" onmousedown="hold();" onmouseup="release();" onmouseout="release();" onmousemove="line();"></canvas>
<button type="button" onclick="red()"> Red </button>
<button type="button" onclick="blue()"> Blue </button>
<button type="button" onclick="white()"> White(Eraser) </button>
<button type="button" onclick="line()"> Line </button>
<script>
element=document.getElementById("drawLine");
element.setAttribute("width", window.innerWidth-15);
element.setAttribute("height", window.innerHeight-50);
context=element.getContext('2d');
context.strokeRect(0, 0, window.innerWidth-15, window.innerHeight-50);
</script>
</body>
</html>
