<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta viewpoint="width=device-width,initial-scale=1">
<script type="text/javascript">
function line(xs,ys,xe,ye){
var txt=document.getElementById('canvas').getContext("2d");
txt.strokeStyle="rgb(200,100,0)";
txt.beginPath();
txt.moveTo(xs,ys);
txt.lineTo(xe,ye);
txt.stroke();
}
window.οnlοad=function(){
document.getElementById("canvas").οnmοusedοwn=function(e){
var e=e||event;
var xstart=e.clientX;
var ystart=e.clientY;
document.οnmοusemοve=function(e){
var e=e||event;
var x=e.clientX;
var y=e.clientY;
line(xstart,ystart,x,y);
}
document.οnmοuseup=function(){
document.οnmοusemοve=null;
}
}
}
</script>
</head>
<body>
<canvas id="canvas" width="400" height="400" style="border:red 2px solid"></canvas>
</body>
</html>