Вот так попробуйте-рисует нормально-а с багами позже-сейчас главное чтобы рисовал
<!DOCTYPE html><html lang="ru">
<head>
<meta charset="utf-8" />
<title>canvas</title>
<!--[if lt IE 9]><script
src="http://html5shiv.googlecode.com/s
vn/trunk/html5.js"></script>
<![endif]-->
</head>
<body onLoad="draw_cl()" onselectstart='return false' style='height:300px;overflow:hidden'>
<center>
<canvas id="b" height="0" width="0" style="border: 2px dashed red"></canvas>
</center>
<br>11111111111111
<script type="text/javascript">
var canvas = document.getElementById("b");
canvas.pr=0;
canvas.mPoint=[];
canvas.width=500; //ширина холста
canvas.height=100; //высота холста
var context = canvas.getContext("2d");
function clearCanvas(){context.clearRect
(0,0,canvas.width,canvas.height)};
function draw_cl(){
//получаем позицию курсора относительно холста
function mousePageXY(e){
var x = 0, y = 0;
if (!e) e = window.event;
if (e.pageX || e.pageY)
{
x = e.pageX;
y = e.pageY;
}
else if (e.clientX ||
e.clientY)
{
x = e.clientX +
(document.documentElement.scrollLeft || document.body.scrollLeft) -
document.documentElement.clientLeft;
y = e.clientY +
(document.documentElement.scrollTop || document.body.scrollTop) -
document.documentElement.clientTop;
}
x -= canvas.offsetLeft;
y -= canvas.offsetTop;
return {"x":x, "y":y};
}
canvas.addEventListener("mousemove",paint,false); //добавляем события клика по холсту
//рисуем
canvas.addEventListener("mousedown",function(){canvas.pr=1},false);
document.body.addEventListener("mouseup",function(){canvas.pr=0;canvas.oldLine=0;},false);
canvas.addEventListener("mouseout",function(){canvas.oldLine=0},false);
function paint(e){
context.strokeStyle = 'red';
context.fillStyle='green';
context.lineWidth=2;
if(!canvas.pr)return;
var mc = mousePageXY(e);
if(!canvas.oldLine)
{canvas.oldLine=mc;return;context.beginPath();return;}else{
var old=canvas.oldLine;
//context.beginPath();
context.moveTo(old.x,old.y);
context.lineTo(mc.x,mc.y);
context.stroke();
//context.closePath();
canvas.oldLine=mc;
}
}
};
</script>
</body>
</html>