Untitled

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Javascript</title>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body onload="init();">
<div style="width:700px;">
<div id="status" style="width:65px;position:absolute;padding:10px;background:#111;color:#FFF;"></div>
<canvas id="Canvas" height="300" width="300" style="border:1px solid black;position:relative;float:left;"></canvas>
<div id="brushbase" style="width:80px; height:600px;border:1px solid #eee;position:relative;float:left;display:block;">
	<div id="slidearea" style="position:absolute;margin:30px;width:20px;height:540px;background:#eee;">
	</div>
	<div id="slider" style="position:absolute;margin:25px;width:30px;height:20px;background:#bbb;cursor:pointer;">
	<p id="check"></p>
	</div>
</div>
<div id="colorsbase" style="width:600px;border:1px solid #eee; height:80px;position:relative;float:left;">
	<ul id="colors">
		<li class="col" id="col0" onclick="pen.color='red'"></li>
		<li class="col" id="col1" onclick="pen.color='green'"></li>
		<li class="col" id="col2" onclick="pen.color='blue'"></li>
		<li class="col" id="col3" onclick="pen.color='black'"></li>
		<li class="col" id="col4" onclick="pen.color='orange'"></li>
		<li class="col" id="col5" onclick="pen.color='white'"></li>
	</ul>
	<div id="current" style="position:absolute;right:0px;height:70px;width:70px;background:#111;margin:5px;color:white;text-align:center;font-family:arial;">
		<text style="padding-top:5px;">Current</text>
	</div>
</div>
</div>
<style>
ul#colors
{
	padding:0px;
	margin:0px;
	//display:inline;
	position:absolute;
}
li.col
{
	display:inline-block;
	border:1px solid black;
	list-style-type:none;
	width:70px;
	height:70px;
	margin-left:5px;
	margin-top:5px;
	cursor:pointer;
}
.col
{
}

#col0{background:red;}
#col1{background:green;}
#col2{background:blue;}
#col3{background:black;}
#col4{background:orange;}
#col5{background:white;}

</style>
<script>
function controls()
{
	moveslider();
	document.getElementById('brushbase').addEventListener('mousemove',SlideMove,true);
	document.getElementById('brushbase').addEventListener('mousedown',SlideDown,true);
	document.addEventListener('mouseup',SlideUp,true);
}

var mouse_down = "false";

function moveslider()
{
	if (mouse_down=="true" && $('#slider').offset().top>=30 && $('#slider').offset().top<=560)
	{
		$('#slider').css("top",control.y-34);
		if ($('#slider').offset().top<30){$('#slider').css("top",-4);}
		if ($('#slider').offset().top>560){$('#slider').css("top",526);}

	}
}

var control =
{
	y:0,
}

function SlideMove(evt)
{
    var root = document.documentElement;
    control.y = evt.clientY - 10 - root.scrollTop;
}


function SlideDown()
{
	mouse_down = "true";
}

function SlideUp()
{
	mouse_down = "false";
}

</script>
<script>
// ~~~~~~~~ VARIABLES ~~~~~~~~~~
var HEIGHT=600;
var WIDTH=600;
var c = document.getElementById('Canvas');
var ctx = c.getContext('2d');
// ~~~~~~~~~ OBJECTS ~~~~~~~~~~~
var mouse =
{
    x:0,
    y:0,
    clicked:'no',
}

var pen =
{
    array:[],
    size : 2, //radius
	color: "black",
}

// ~~~~~~~~~~~ DRAW ~~~~~~~~~~~~~~
function render()
{
    ctx.fillStyle = 'black';

    document.getElementById('status').innerHTML = mouse.x + ' ' + mouse.y + '<br/>' + mouse.clicked + ' ' + pen.array.length;

    drawPen();
    Gaps();
}

function drawPen()
{
    if (pen.array.length>0)
    {
        for (i=0;i<pen.array.length;i++)
        {
            ctx.beginPath();
            ctx.arc(pen.array[i][0], pen.array[i][1],pen.size,0,Math.PI*2,false);
			ctx.fillStyle = pen.color;
            ctx.fill();
        }
    }
}

function Gaps()
{
    for (i=1;i<pen.array.length;i++)
    {
        if (pen.array[i-1][0]%pen.array[i][0]>2 || pen.array[i-1][1]%pen.array[i][1]>2)
        {
            ctx.beginPath();
            ctx.moveTo(pen.array[i-1][0],pen.array[i-1][1]);
            ctx.quadraticCurveTo((pen.array[i-1][0]+pen.array[i][0])/2,(pen.array[i-1][1]+pen.array[i][1])/2,pen.array[i][0],pen.array[i][1]);
            ctx.lineWidth=pen.size*2;
            ctx.strokeStyle=pen.color;
            ctx.stroke();
        }
    }
}
// ~~~~~~~~~~~~ LOGIC ~~~~~~~~~~~~~~~
function logic()
{
    Draw();
    Cleardups();
	Current();
	Size();
}

function Size()
{
	pen.size = 10/100*($('#slider').offset().top-34)+1;
}

function Current()
{
	document.getElementById('current').style.background = pen.color;
	if (pen.color == "white" || pen.color == "orange")
	{
		document.getElementById('current').style.color = "black";
	}
	else if (pen.color == "red" || pen.color == "green" || pen.color == "black")
	{
		document.getElementById('current').style.color = "white";
	}
}

function MouseMove(evt)
{
    var rect = c.getBoundingClientRect(), root = document.documentElement;

    // return relative mouse position
    mouse.x = evt.clientX - rect.top - root.scrollTop;
    mouse.y = evt.clientY - rect.left - root.scrollLeft;

}

function MouseDown()
{
    mouse.clicked="yes";
}

function MouseUp()
{
    pen.array.length = 0;
    mouse.clicked="no";
}

function Draw()
{
    if (mouse.clicked=="yes")
    {
        pen.array.push([mouse.x,mouse.y,pen.color]);
    }
}

function Cleardups()
{
    for (i=0;i<pen.array.length;i++)
    {
        if (pen.array[i+1] && pen.array[i][0]==pen.array[i+1][0] && pen.array[i+1] && pen.array[i][1]==pen.array[i+1][1])
        {
            pen.array.splice(i,1);
        }
    }
}
// ~~~~~~~~~~~~~~~~ MECHANICS ~~~~~~~~~~~~~~~~

function init()
{
	BuildCanvas();
	c.addEventListener('mousemove',MouseMove,true);
	c.addEventListener('mousedown',MouseDown,true);
	window.addEventListener('mouseup',MouseUp,true);

	intervalID = setInterval(play,1);
}


function play()
{
    logic();
    render();
	controls();
}

function BuildCanvas()
{
    c.height=HEIGHT;
    c.width=WIDTH;
}


</script>
</body>
</html>