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){
if(this.startDraw){
this.ctx.strokeStyle = '#000';
this.ctx.lineWidth = this.size;
this.ctx.lineCap = 'round';
this.ctx.clearRect(0, 0, 700, 500);
switch(tool){
case 'pen':
this.ctx.beginPath();
this.ctx.moveTo(this.x1, this.y1);
this.ctx.lineTo(this.x, this.y);
this.ctx.stroke();
break;
}
}
}
draw.init();
draw.canvas.addEventListener('mousedown', function(e){
draw.startDraw = true;
draw.x1 = e.pageX - draw.canvas.offsetLeft; //Координата X
draw.y1 = e.pageY - draw.canvas.offsetTop; //Координата Y
}, 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>