javascript - Cannot figure out how to get css/js masking code to work in meteor -

i have found example code , thought sweet have plug in, new meteor , making simple naive mistakes. thought jquery included in meteor , if use $ or document.getelementbyid in "client" code section work, either null latter , $ not defined former :(

i tried concise possible code in post.

here javascript code masking in project:

 if (meteor.isclient) {    var canvas = document.getelementbyid("canvas");;   if (canvas[0].getcontext) {       var context = $canvas[0].getcontext('2d');       context.fillstyle = 'red';       context.fillrect(10, 10, 300, 60);   } } 

here relevant css code:

#box {     width: 150px;     height: 150px;     background-color: blue;     border-radius: 50px;     overflow: hidden;     -webkit-mask-image: url(data:image/png;base64,ivborw0kggoaaaansuheugaaaaeaaaabcaiaaacqd1peaaaagxrfwhrtb2z0d2fyzqbbzg9izsbjbwfnzvjlywr5ccllpaaaaa5jrefuenpiygbgaagwaaaeaagba+ojaaaaaelftksuqmcc); /* fixes overflow:hidden in chrome/opera */ } 

html code:

<template name="applicationlayout"> <div id = "backgrounddiv"> </div>  <div id="box">   <canvas id="canvas" width="300px" height="300px"></canvas> </div> <div style="width: 40%">   <header>       {{> logofloat}}       {{> navbar}}   </header>   {{> yield}}   {{> footer}} </div> 

update able work using salman's template.applicationlayout.onrendered() function , anomepani javascript dom selector code , adding id="canvas" canvas object. thank guys help, wish mark both answers.

you need wrap client code in onrendered method

if (meteor.isclient) {     template.applicationlayout.onrendered(function(){         var $canvas = document.getelementbyid("canvas");         if (canvas[0].getcontext) {             var context = $canvas[0].getcontext('2d');             context.fillstyle = 'red';             context.fillrect(10, 10, 300, 60);         }     }); }