IVAAAAN,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
</head>
<body>
<canvas width="700" height="500" style="border:1px solid #ccc;margin:10px;cursor:crosshair;" id="canvas"></canvas>
<script>
var draw = {
tool:'pen', // Инструмент
size:'5', // Толщина
}
draw.init = function(){ //Иницилизация канвас
this.canvas = document.getElementById('canvas');
this.ctx = this.canvas.getContext('2d');
};
draw.drawing = function(tool){
var x1=(Math.PI/180)*0;
var x2=(Math.PI/180)*360;
if(this.startDraw){
this.ctx.strokeStyle = '#66FF00';
this.ctx.fillStyle = '#66FF00';
this.ctx.lineWidth = this.size;
this.ctx.lineCap = 'round';
switch(tool){
case 'pen':
this.ctx.beginPath();
this.ctx.arc(this.x, this.y, 15, x1, x2)
this.ctx.fill();
this.ctx.stroke();
break;
}
}
}
draw.init();
draw.canvas.addEventListener('mousedown', function(e){
draw.startDraw = true;
}, false);
draw.canvas.addEventListener('mousemove', function(e){
draw.x = e.pageX - draw.canvas.offsetLeft; //Координата X
draw.y = e.pageY - draw.canvas.offsetTop; //Координата Y
draw.drawing('pen');
}, false);
draw.canvas.addEventListener('mouseup', function(){
draw.startDraw = false;
}, false);
</script>
</body>
</html>