如何用流星創建完整的窗口畫布？

Question

如何用流星創建一個完整的窗口畫布？

我相當新的HTML5畫布元素，在不同的教程和一些嘗試後，我可以做所有基本的東西，但我現在正忙於這個完整的窗口問題幾個小時，無法找到解決方案。

有了下面的代碼

Template.canvasT.rendered = function(){ 
    var canvas = $("#canvas"); 
    canvas.css('width', $(window).innerWidth()); 
    canvas.css('height', $(window).innerHeight()); 
    ctx = canvas[0].getContext('2d'); 

    ; some drawing 
} 

縮放效果被創建，如何做到這一點沒有？謝謝。與完整代碼和問題 Meteor: How to Get Context of an HTML5 Canvas Element

MeteorPad：

完全窗口的畫布代碼從。

Answer 1

後對方回答我指出了正確的方向，我終於想出自己。

設置HTML標記屬性和 CSS樣式屬性：

Template.canvasT.rendered = function(){ 
    var canvas = $("#canvas"); 
    canvas.attr('width',$(window).innerWidth()); 
    canvas.attr('height',$(window).innerHeight()); 

    canvas.css('width',$(window).innerWidth() + "px"); 
    canvas.css('height',$(window).innerHeight() + "px"); 
} 

Answer 2

原因是有縮放效果是因爲您正在操縱畫布元素的CSS屬性，而不是其寬度和高度屬性。

嘗試：

DTemplate.canvasT.rendered = function(){ 
    var canvas = $("#canvas")[0]; 
    canvas.width = $(window).innerWidth(); 
    canvas.height = $(window).innerHeight(); 
    ctx = canvas.getContext('2d'); 

    ; some drawing 
}