使用鼠标指针在画布上绘图不起作用

Question

我已经创建了一个如下所示的网页。 我想要的是允许用户在画布上绘制一些东西。 但是下面的代码没有绘制内容。

   <asp:Content runat="server" ID="FeaturedContent" 
          ContentPlaceHolderID="FeaturedContent">
          <section class="featured">
             <div class="content-wrapper">
                <script type="text/javascript">
             var canvas, ctx, flag = false,
                 prevX = 0,
                 currX = 0,
                 prevY = 0,
                 currY = 0,
                 dot_flag = false;

             var x = "black",
                 y = 2;

             function init() {
                 canvas = document.getElementById('can');
                 ctx = canvas.getContext("2d");
                 w = canvas.width;
                 h = canvas.height;

                 canvas.addEventListener("mousemove", function (e) {
                     findxy('move', e)
                 }, false);
                 canvas.addEventListener("mousedown", function (e) {
                     findxy('down', e)
                 }, false);
                 canvas.addEventListener("mouseup", function (e) {
                     findxy('up', e)
                 }, false);
                 canvas.addEventListener("mouseout", function (e) {
                     findxy('out', e)
                 }, false);
             }

             function color(obj) {
                 switch (obj.id) {
                     case "green":
                         x = "green";
                         break;
                     case "blue":
                         x = "blue";
                         break;
                     case "red":
                         x = "red";
                         break;
                     case "yellow":
                         x = "yellow";
                         break;
                     case "orange":
                         x = "orange";
                         break;
                     case "black":
                         x = "black";
                         break;
                     case "white":
                         x = "white";
                         break;
                 }
                 if (x == "white") y = 14;
                 else y = 2;

             }

             function draw() {
                 ctx.beginPath();
                 ctx.moveTo(prevX, prevY);
                 ctx.lineTo(currX, currY);
                 ctx.strokeStyle = x;
                 ctx.lineWidth = y;
                 ctx.stroke();
                 ctx.closePath();
             }

             function erase() {
                 var m = confirm("Want to clear");
                 if (m) {
                     ctx.clearRect(0, 0, w, h);
                     document.getElementById("canvasimg").style.display = 
                                  "none";
                 }
             }

             function save() {
                 document.getElementById("canvasimg").style.border = "2px 
                  solid";
                 var dataURL = canvas.toDataURL();
                 document.getElementById("canvasimg").src = dataURL;
                 document.getElementById("canvasimg").style.display = 
                                                               "inline";
             }

             function findxy(res, e) {
                 if (res == 'down') {
                     prevX = currX;
                     prevY = currY;
                     currX = e.clientX - canvas.offsetLeft;
                     currY = e.clientY - canvas.offsetTop;

                     flag = true;
                     dot_flag = true;
                     if (dot_flag) {
                         ctx.beginPath();
                         ctx.fillStyle = x;
                         ctx.fillRect(currX, currY, 2, 2);
                         ctx.closePath();
                         dot_flag = false;
                     }
                 }
                 if (res == 'up' || res == "out") {
                     flag = false;
                 }
                 if (res == 'move') {
                     if (flag) {
                         prevX = currX;
                         prevY = currY;
                         currX = e.clientX - canvas.offsetLeft;
                         currY = e.clientY - canvas.offsetTop;
                         draw();
                     }
                 }
             }
            </script>
       <canvas id="can" width="400" height="400" 
    style="position:absolute;top:10%;left:10%;border:2px solid;"></canvas>
    </div>
</section>

但是当我将上面的代码包含在只有扩展名为.html的html文件中时，它就可以了。 有人可以告诉我它有什么问题吗？ 在某些情况下，“canvas”也不是有效元素。