innerHTML not working after getImageData

Question

I used the code for displaying in a video tag what the webcam shows.

If the webcam access is supported, I call this function every second:

function refresh() {
  var h = video.height;
  var w = video.width;
  var img = video.getImageData(0, 0, w, h);
  document.getElementById('text_01').innerHTML = "!";
}

With var video being

var video = document.querySelector('video');

The problem is that text of "text_01" changes successfully when I place these lines like this:

document.getElementById('text_01').innerHTML = "!";
img = video.getImageData(0, 0, w, h);

but not like this:

img = video.getImageData(0, 0, w, h);
document.getElementById('text_01').innerHTML = "!";

Is it some kind of restriction using innerHTML after some functions?

Answer 1

.getImageData is a function of <canvas> elements, not <video> elements. If you checked your browser console, you'd see something along the lines of getImageData is not a function.

This is why the innerHTML is not set - due to the error, the code stops.