Почему моя область рисования холста настолько мала?

Question

Я создаю enyo Control, основанный на холсте. Он должен захватывать события мыши или пальца и нарисовать их на нем. Однако, когда я рисую на этом холсте, он рисует только в меньшую его часть.

Посмотрите на это jsfiddle так как он содержит все соответствующие коды.

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

Вы можете использовать только атрибуты height/width на холсте, а не размер его с помощью CSS. Проверьте эту обновленную скрипку http://jsfiddle.net/AFqvD/4/

Соответствующая частью является:

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