canvas制作一个在线画图版

HTML代码：<!DOCTYPE html>

<html>
 <head>
  <title> 在线画图</title>
  <meta charset="utf-8" />
<style>　　#d{margin-left:30%;}</style>
 </head>

 <body>
    <div id="d">　　　　<canvas id="canvas" width="500" height="500" style="border:1px solid red;"></canvas>　　</div>
</body>
</html>

JavaScript代码：

 1 <script>
 2         var canvas=document.getElementById("canvas");
 3         var ctx=canvas.getContext("2d");
 4
 5         canvas.onmousedown=function(event){
 6             var x=event.clientX-canvas.offsetLeft;
 7             var y=event.clientY-canvas.offsetTop;
 8             ctx.beginPath();
 9             ctx.moveTo(x,y);
10
11             document.onmousemove=function(event){
12             var x=event.clientX-canvas.offsetLeft;
13             var y=event.clientY-canvas.offsetTop;
14             ctx.lineTo(x,y);
15             ctx.strokeStyle="red";
16             ctx.stroke();
17             };
18         };
19         document.onmouseup=function(){
20             ctx.closePath();
21             document.onmousemove=null;
22         };
23     </script>

运行后：