my paint app

<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="http://necolas.github.io/normalize.css/1.1.2/normalize.css">
	<link rel="stylesheet" type="text/css" href="my.css">
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
	<script type="text/javascript" src="http://code.createjs.com/createjs-2013.05.14.min.js"></script>
	<script type="text/javascript" src="my.js"></script>
</head>
<body>
	<div id="wrapper">
		<div>
			<select id="brushsize">
				<option>1</option>
				<option>2</option>
				<option>5</option>
				<option selected>10</option>
				<option>20</option>
			</select>
			<select id="brushcolor">
				<option selected value="#000000">შავი</option>
				<option value="#FF0000">წითელი</option>
				<option value="#FFFF00">ყვითელი</option>
				<option value="#00FF00">მწვანე</option>
				<option value="#0000FF">ლურჯი</option>
				<option value="#C0C0C0">ნაცრისფერი</option>
				<option value="#FFFFFF">თეთრი</option>
			</select>
			<a href="#" download="my.png" id="save">save</a>
			<a href="#" id="clear">clear</a>
		</div>
		<div>
			<canvas id="mycanvas" width="500px" height="500px"></canvas>
		</div>
	</div>
</body>
</html>

canvas {
  margin: 10px auto;
  border: 2px solid black;
  display: block;
}
#wrapper{
	width: 500px;
	margin: auto;
}

$(function() {
	var brush = {
		size: Number($("#brushsize").val()),
		color: $("#brushcolor").val()
	};

	$("#brushsize").on("change",function(e){
		brush.size = $(e.target).val();
	});
	$("#brushcolor").on("change",function(e){
		brush.color = $(e.target).val();
	});
	window.stage = new createjs.Stage("mycanvas");
	brush.drow = new createjs.Shape();
	stage.addChild(brush.drow);

	stage.update();

	var drow = function(e){
		if ( brush.b1 ) {
			brush.b2 = {};
			brush.b2.x = (e.pageX - stage.canvas.offsetLeft);
			brush.b2.y = (e.pageY - stage.canvas.offsetTop);
			brush.drow.graphics
				.setStrokeStyle(brush.size, 'round', 'round')
				.beginStroke(brush.color)
				.moveTo(brush.b1.x, brush.b1.y)
				.lineTo(brush.b2.x, brush.b2.y)
			;
			brush.b1 = brush.b2;
		}else{
			brush.b1 = {};
			brush.b1.x = (e.pageX - stage.canvas.offsetLeft);
			brush.b1.y = (e.pageY - stage.canvas.offsetTop);
			brush.drow.graphics
				.setStrokeStyle(brush.size, 'round', 'round')
				.beginStroke(brush.color)
				.beginFill( brush.color )
				.drawCircle(brush.b1.x, brush.b1.y, 1 )
			;
		}
		stage.update();
	};
	$("#mycanvas").on("mousedown",function(e){
		drow(e);
		$("#mycanvas").on("mousemove.c",function(e){
			drow(e);
		});
		$(document).on("mouseup",function(e){
			delete brush.b1;
			$("#mycanvas").off("mousemove.c");
		});
	});
	$("#clear").on("click",function(e){
		brush.drow.graphics.clear();
		stage.update();
	});
	$("#save").on("click",function(e){
		$(e.target).attr("href",stage.canvas.toDataURL());
	});
});