canvas矩形的清除，描边与填充

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>huatu</title>
 6     <style>
 7         body{
 8             background: #dddddd;
 9         }
10         #canvas{
11             margin: 10px;
12             background: #ffffff;
13             border: thin inset #aaaaaa;
14         }
15     </style>
16 </head>
17 <body>
18     <canvas id="canvas" width="600" height="400">
19         Canvas not Supported
20     </canvas>
21     <script>
22         var canvas=document.getElementById(‘canvas‘),
23             context=canvas.getContext(‘2d‘);
24         context.lineJoin=‘round‘;
25         context.lineWidth=30;
26 
27         context.font=‘24px Helvetica‘;
28         context.fillText(‘Click anywhere to erase‘,175,40);
29 
30         context.strokeRect(75,100,200,200);
31         context.fillRect(325,100,200,200);
32 
33         context.canvas.onmousedown = function(e) {
34             context.clearRect(0,0,600,400);
35         }
36     </script>
37 </body>
38 </html>