0

When video size changes I want to resize the canvas that overlays it, but sometimes the canvas fails to resize.

I have looked at other questions but they have a different issue.


function resizeCanvas(event) {
  if(!canvas){
    return;
  }
  var videoElement = event.target; // if breakpoint here, and step thru, it works.
  canvas.width = videoElement.offsetWidth; // sometimes fails to set
  canvas.height = videoElement.offsetHeight; // sometimes fails to set
} // if breakpoint here, it doesn't work.

Sometimes canvas.width and height are set to those of the video element, but sometimes they are not. I've confirmed that the function is called successfully with a breakpoint. But when I place the breakpoint at the end of the function, I find that the canvas.width and videoElement.offsetWidth are different! So canvas.width was not set. However, if I place the breakpoint at the beginning of the function and step thru, then the width and height are always set. Very strange.

Thank you in advance for any help.

Philip
  • 638
  • 1
  • 8
  • 22
  • 1
    This SO answer may be useful: [HTML5 Video Dimensions](https://stackoverflow.com/questions/4129102/html5-video-dimensions#4129189) – enxaneta Jun 13 '19 at 07:26
  • 1
    Thanks; I learned what is the difference between offsetWidth and videoWidth. This may be useful in the future. – Philip Jun 14 '19 at 00:35

0 Answers0