[solved] Canvas Not Getting Canvas Id

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.

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

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

1 Like

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.


  <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 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 id='emotion_chart'></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> -->
      <!--  <label class="control-label" for="console">Console</label><br><br> -->
      <div id="console" class="democonsole">

`type or paste code here`