[solved] Canvas Not Getting Canvas Id

help
1

Can someone help figure out why my canvas does not get renderd…please, I’m spending almost 2 hours and can’t get it solved.

Uncaught TypeError: Cannot read property ‘getContext’ of null

Thank you.

2

Hi, you will need to post some code for anyone to be able to help you

Specifically, the template which includes the template, and the code where you call getContext

1 Like
3

Can give only hint…I think your canvas is part of conditional statement. Move the Canvas rendering to a separate template

1 Like
4

Thank you so much @perumalkuk .
i got it working. Still I cant get the clearRect(0, 0, w, h) working.

here is the code please help.

5

The HTML

  <div class="row">
    <div class="col-md-7">
      <div id="videoBig">
        <video id="video" autoplay width="450" height="680" poster="img/spn2Logo.jpeg"></video>
        <canvas id="overlay" width="450" height="680"></canvas>         
      </div>
         
    </div>
    <div id="emotion_container">
      <div id="emotion_icons">
        <img class="emotion_icon small" id="icon1" src="img/icon_angry.png">
        <img class="emotion_icon" id="icon2" src="img/icon_sad.png">
        <img class="emotion_icon" id="icon3" src="img/icon_surprised.png">
        <img class="emotion_icon small" id="icon4" src="img/icon_happy.png">
      </div>
     <div id='emotion_chart'></div>
   </div>
    <div class="col-md-5">
      <div class="row">
        <div class="col-md-12">
            <a id="call" class="btn-floating halfway-fab waves-effect waves-light green left pulse"><i class="material-icons" >dialer_sip</i> </a>

          <!-- <a id="viewer" href="#" class="btn btn-primary">
            <span class="glyphicon glyphicon-user"></span> Viewer</a> -->
          
            
            <a id="terminate" class="btn-floating halfway-fab waves-effect waves-light red right"><i class="material-icons" >stop</i> </a>
         
           <!--  <a id="logout" class="btn-floating halfway-fab waves-effect waves-light red right "><i class="material-icons" >logout</i> </a> -->
     
        </div>
      </div>
      <br/>
      <!--  <label class="control-label" for="console">Console</label><br><br> -->
      <div id="console" class="democonsole">
        <ul></ul>
      </div>
    </div>
    
  </div>
</div>


`type or paste code here`