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

Question

I have found example code and I thought sweet I just have to plug it in, but I am new to Meteor and I am hopefully just making simple naive mistakes. I thought that jquery was already included in Meteor and that if I use $ or document.getElementById in the "Client" code section that it would work, but I either get a null for the latter and a $ is not defined for the former :(

I tried to be as concise as possible with my code in this post.

Here is the javascript code for the masking in my 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 is the 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); /* this fixes the 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 I was able to get this to work by using Salman's Template.applicationLayout.onRendered() function and then anomepani javascript dom selector code and by adding id="canvas" to my canvas object. Thank you guys for your help, I wish I could mark both as answers.

Salman Hasni · Accepted Answer · 2016-03-07T15:59:56.483

2

You need to wrap up your 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);
        }
    });
}

edited Mar 07 '16 at 15:59

answered Mar 07 '16 at 05:29

Salman Hasni

194
2
13

score 1 · Answer 2 · edited May 23 '17 at 11:50

1

You have copied code from Example code but you have mixed up jQuery selector and javascript DOM selector that's why it is not working

Try this one using javascript dom selector

var canvas = document.getElementById("canvas");;
  if (canvas.getContext) {
      var context = canvas.getContext('2d');
      context.fillStyle = 'red';
      context.fillRect(10, 10, 300, 60);
  }

or Try this one using jQuery selector

      var $canvas = $("#canvas");
        //you can create variable canvas instead '$canvas' both works
      if ($canvas[0].getContext) {
          var context = $canvas[0].getContext('2d');
          context.fillStyle = 'red';
          context.fillRect(10, 10, 300, 60);
      }

edited May 23 '17 at 11:50

Community

1
1

answered Mar 07 '16 at 12:27

anomepani

1,796
2
25
34

For some reason I still get "$" is not a function even if I wrap it up in if (Meteor.isClient) { Template.applicationLayout.onRendered(function(){}}); – smuggledPancakes Mar 07 '16 at 13:10
@smuggledpancakes Can you please share some code in jsfiddle so I can track down. '$' is not function means $ sign is defined and jquery loaded otherwise it throws reference error – anomepani Mar 08 '16 at 06:00
I think the $ is not a function because I have to use it inside of onCreated, onRendered, or onDestroyed function, see here http://docs.meteor.com/#/full/template_inst. I am pretty sure this is it. – smuggledPancakes Mar 08 '16 at 14:56

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

2 Answers2