Html5 canvas 为什么我的画布绘图区域如此小？

我正在基于画布创建一个enyo控件。它应该捕获鼠标或手指事件，并将它们绘制到上面。然而，当我在画布上画画时，它只画了一小部分

看看它，因为它包含所有相关的代码

enyo.kind({
  name: "SignatureControl",
  kind: "enyo.Canvas",

  recording: false,
  points: [],

  handlers: {
    ondown: "startRecord",
    onmove: "record",
    onup: "stopRecord"
  },

  startRecord: function(inSender, inEvent) {
    this.recording = true;

    if(node = this.hasNode()) {
      this.points.push({
        x: inEvent.clientX - node.offsetLeft,
        y: inEvent.clientY - node.offsetTop,
        d: false,
        p: 1
      });
    }
    this.update();
  },

  stopRecord: function() {
    this.recording = false;
  },

  record: function(inSender, inEvent) {
    if( this.recording ) {
    if(node = this.hasNode()) {
      this.points.push({
        x: inEvent.clientX - node.offsetLeft,
        y: inEvent.clientY - node.offsetTop,
        d: true,
        p: 1
      });
    }
      this.update();
    }
  },

  update: function() {
        var canvas = this.hasNode();
        if (canvas.getContext) {
            var ctx = canvas.getContext('2d');
      this.log(ctx.canvas.width);

      ctx.lineJoin = "round";
      ctx.lineWidth = 1;

      var i = this.points.length - 1; 

      ctx.strokeStyle = "rgba(0,0,0," + this.points[i].p + ")";
      ctx.beginPath();
      if(this.points[i].d && i){
        ctx.moveTo(this.points[i-1].x, this.points[i-1].y);
      }else{
        ctx.moveTo(this.points[i].x-1, this.points[i].y);
      }
      ctx.lineTo(this.points[i].x, this.points[i].y);
      ctx.closePath();
      ctx.stroke();
        }
    }
});

---

您只能在画布上使用高度/宽度属性，而不能通过CSS调整其大小。看看这个更新的小提琴

相关部分为：

{kind: "SignatureControl", attributes: {height: 150, width: 300}}

---

您只能在画布上使用高度/宽度属性，而不能通过CSS调整其大小。看看这个更新的小提琴

相关部分为：

{kind: "SignatureControl", attributes: {height: 150, width: 300}}

---

为了澄清一点，通过CSS更改高度/宽度确实会影响画布元素中用于指定绘制内容/位置的内部坐标，但不会影响渲染时的大小。根据应用程序的不同，您可能需要设置两组宽度/高度，以便可以绘制屏幕像素以外的坐标。为了澄清一点，通过CSS更改高度/宽度确实会影响画布元素中用于指定绘制内容/位置的内部坐标，但不会影响渲染时的大小。根据应用程序的不同，您可能需要设置两组宽度/高度，以便可以绘制屏幕像素以外的坐标。