HTML CANVAS 不起作用

>我有以下画布代码：

    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 "blue":
          x = "blue";
          break;
        case "red":
          x = "red";
          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();
        }
      }
    }

<div class="row 50% third">
  <div class="12u">
    <canvas class="image fit" id="can" style=" background-color:rgb(250,250,250); "></canvas>
    <div style="width:5%;height:30px;background:blue;" id="blue" class="colors" onclick="color(this)"></div>
    <div style="width:5%;height:30px;background:red;" id="red" class="colors" onclick="color(this)"></div>
    <div style="width:5%;height:30px;background:black;" id="black" class="colors" onclick="color(this)"></div>
    <div style="width:5%;height:30px;background:white;border:2px solid;" id="white" class="colors" onclick="color(this)"></div>
    <img id="canvasimg" style="position:absolute;top:10%;left:52%;" style="display:none;">
    <input type="button" value="save" id="btn" size="30" onclick="save()" style="position:absolute;top:55%;left:10%;">
    <input type="button" value="clear" id="clr" size="23" onclick="erase()" style="position:absolute;top:55%;left:15%;">
  </div>
</div>

我已将我的身体负载设置为 init（）;

但是，画布不起作用。

编辑：当我在html中提供特定的宽度和高度时，画布可以工作，但是我发现我的绘图和鼠标总是偏离一点点。有没有办法使用百分比宽度和高度？w = 画布宽度; h = 帆布高度;似乎是导致问题的人。