<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<script>
var flag=false;
var element;
var ctx;
var color=3,drawmethod=1;
var dotx,doty;
var temp;
function draw()
{
if(ctx && flag){
ctx.beginPath();
drawColor();
if(drawmethod==1) drawLines();
else if(drawmethod==2) drawDotPoint();
}
}
function hold()
{
flag=true;
element=document.getElementById('drawLine');
ctx=element.getContext('2d');
draw();
}
function release()
{
flag=false;
}
// var draw=new array();
// draw.color=a;
// draw.color();
//
function selectColor(temp)
{
color=temp;
}
function drawMethod(temp)
{
drawmethod=temp;
}
function drawColor()
{
switch(color){
case 0:
ctx.fillStyle="rgb(255, 255, 255)";
ctx.strokeStyle="rgb(255, 255, 255)";
break;
case 1:
ctx.fillStyle="rgb(5, 5, 230)";
ctx.strokeStyle="rgb(5, 5, 230)";
break;
case 2:
ctx.fillStyle="rgb(230, 5, 5)";
ctx.strokeStyle="rgb(255, 0, 0)";
break;
case 3:
ctx.fillStyle="rgb(0, 0, 0)";
ctx.strokeStyle="rgb(0, 0, 0)";
}
}
function drawDotPoint()
{
ctx.arc(event.x-7, event.y-7, 3, 0, Math.PI*2, false);
ctx.fill();
}
function drawLines()
{
if(ctx && flag){
ctx.beginPath();
ctx.lineWidth=3;
ctx.moveTo(dotx-7, doty-7);
ctx.lineTo(event.x-7, event.y-7);
dotx=event.x;
doty=event.y;
//ctx.arc(event.x-7, event.y-7, 8, 0, Math.PI*0.1, false);
//ctx.fillStyle="rgb(255, 0, 0)";
//ctx.fill();
ctx.stroke();
return 0;
}
}
</script>
</head>
<body>
<canvas id="drawLine" width="300" height="300" onmousedown="hold();"
onmouseup="release();" onmouseout="release();" onmousemove="draw();"></canvas>
Choose Color:
<select name="colors"onclick="selectColor(this.selectedIndex)">
<option value="White">White(Eraser)</option>
<option value="Blue">Blue</option>
<option value="Red">Red</option>
<option value="Black"selected="selected">Black</option>
</select>
Choose Style:
<button type="button" onclick="drawMethod(1)"> LINE </button>
<button type="button" onclick="drawMethod(2)"> DOT </button>
<!--
<form action="">
</form>
-->
<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>
