Why is my canvas drawing area so smal?

Question

I am creating an enyo Control based on a canvas. It should capture mouse or finger events, and draw them onto it. However when I draw onto that canvas it draws only into a smaller part of it.

Look at that jsfiddle as it contains all relevant code.

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();
        }
    }
});

Answer 1

You can only use the height/width attributes on the canvas, not size it via CSS. Check out this updated fiddle http://jsfiddle.net/AFqvD/4/

The relevant portion is:

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