流星：如何获取一个HTML5 Canvas元素

Question

的背景信息当试图定义内流星canvas元素的背景下，我收到以下错误： Uncaught TypeError: Cannot read property 'getContext' of undefined

如果我手动的JavaScript代码粘贴到浏览器的控制台它按预期执行，没有错误。这告诉我，JS代码在页面加载时不能正确执行（它在canvas元素被设置之前执行？）。我怎样才能解决这个问题？谢谢！

---

客户端模板： client/views/test/test.html

<template name="test"> 
    <div class="container"> 
    <canvas id="canvas1">Your browser does not support HTML5 Canvas. Please update your browser to the latest version.</canvas> 
    </div> 
</template> 

客户端JS： client/views/test/test.js

$(window).load(function() { 
    var canvas = $("#canvas1"); 
    canvas.css('width', $(window).innerWidth()); 
    canvas.css('height', $(window).innerHeight()); 
    var context = canvas[0].getContext('2d'); 
    // draw the canvas 
}); 

Answer 1

的问题是，您试图访问canvas它之前被渲染。

修复：

Template.test.rendered = function(){ 
    var canvas = $("#canvas1"); 
    canvas.css('width', $(window).innerWidth()); 
    canvas.css('height', $(window).innerHeight()); 
    var context = canvas[0].getContext('2d'); 
    // draw the canvas 
}