Uncaught TypeError: Cannot read property 'clearRect' of undefined at drawLoop

#1

after being able to get my canvas called, now it seems like clearRect function does not work. After 3 hours of investigation , i still didin’t find any solution yet.

Please Help, Please
Here is the code

JS

function getCanvas(){
	 var overlay = document.getElementById('overlay');
     var overlayCC = overlay.getContext('2d');
     return overlayCC;
}

window.onload = function(){
	'use strict';
	   var overlay = document.getElementById('overlay');
	   var localVid = document.getElementById('video');
       var localVidW = overlay.width;
       var localVidH = overlay.height;
       var canv = getCanvas();

	drawLoop(localVidW, localVidH, overlay, canv);
} 


function drawLoop(w, h, overlay, overlayCC){

	requestAnimFrame(drawLoop);
	overlayCC.clearRect(0, 0, w, h);


	if (track.getCurrentPosition()) {
		track.draw(overlay);
	}
	var currentParam = track.getCurrentParameters();

	var err = ec.meanPredict(currentParam);

	if (err) {
		updateData(err);
		for (var i=0; i<err.length; i++){
			if (err[i].value > 0.4) {
				document.getElementById('icon'+(i+1)).style.visibility = 'visible';
			}
			  else {
	            document.getElementById('icon'+(i+1)).style.visibility = 'hidden';
 			  }
		}
	}
}```


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>


Error:

 Uncaught TypeError: Cannot read property 'clearRect' of undefined
    at drawLoop
[solved] Canvas Not Getting Canvas Id
#2

I can’t see any Meteor code in your example. Is this a Meteor question?

#3

Yes, I somehow wish there is a way of a workaround

#4

It’s indeed not a Meteor question, that is just JS/HTML.

With that said, the line requestAnimFrame(drawLoop); is calling recursively the drawLoop function with no parameters before every next paint so you’re getting undefined errors.

Perhaps you can try something like

window.onload = function(){
	'use strict';
	var overlay = document.getElementById('overlay');
	var localVid = document.getElementById('video');
       var localVidW = overlay.width;
       var localVidH = overlay.height;
       var canv = getCanvas();
       requestAnimationFrame(()=> {drawLoop(localVidW,localVidH,overlay, canv)});
}

And remove requestAnimFrame(drawLoop); from the drawLoop method. Also use requestAnimationFrame instead of requestAnimFrame because it’s the actual standard.

Also you won’t get far posting in the forum every syntax issue, you really need to have good handle of the basics before attempting something more advanced.

2 Likes
#5

Thank you so much @alawi

1 Like
#6

@alawi I’m sorry to bother you one more time. Just one question.

Does Meteor Has Facial tracking library?
Or is it possible to implement this one right here
With Meteor

I’m currently working on my Thesis Project which is Neural Network Emotion Analysis With WebRTC and Kurento Media Server.

I am a very BIG fan of Meteor, I have decided to do it with meteor. I would be more Than happy if there is a way.

Thank you so much for your time.

Love,

#7

Meteor is a web framework with built-in real-time capabilities, DB accounts among other things, the main goal is to get your ideas out there quickly so you don’t have to glue many pieces yourself.

But tracking faces is certainly out of the scope of Meteor however there is nothing holding you from using any third-party library or NPM package. The one you’re suggesting look like it’s well maintained, so you can just put the JS in the public folder or you can use something like scriptjs to load the file async. Once you get the facial features/emotions captured then you can use Meteor methods or pub/sub to store/broadcast the data. For example, you can build a simple a chatroom that communicates the emotional state of participants real-time with pub/sub. Something that is relatively easy to do with Meteor and would require more leg work to get it going with other frameworks.

Good luck with your thesis.

1 Like
#8

Wow! Thank you so much @alani. That really helped. :blush::blush::blush:

Love,

1 Like