Ask coding questions

← Back to all posts
Image flickering in HTML5 canvas
programmeruser (571)

Open this repl in a new tab, press "play", wait 50-60 seconds, and you will see a video being played.
The problem is that it is flickering.
I tried using requestAnimationFrame and preloading images, but the flickering is still here.
What's going on?

tussiez (1515)
  1. Why are you converting the mp4 into separate images?!
    There is a way to stream the entire video, I don't remember where, but it exists.. search it up

  2. Don't use 1000/60, framerates of video can vary. This might be why you have to wait a second or so to see the flickering issue. @xxpertHacker

programmeruser (571)

1. This was an experiment
2. The max refresh rate of browsers is 1000/60

tussiez (1515)

@programmeruser Sometimes videos have a framerate of 24,30, etc. Also, Chrome has supported 60+fps in requestAnimationFrame for a while now, for displays that support it.

xxpertHacker (860)

@programmeruser It's the maximum possible within a browser, by no means will you reach it.

A 30fps monitor/computer setup definitely won't be running at 60fps.

tussiez (1515)

@xxpertHacker Oops, not fps - refresh rate.
@programmeruser - edit: I pinged xxperthacker woops
E.g you have a simple "FPS" counter:

let frames = 0;
let fps = 0;
const someLoop = () => {

const simpleFPSCounter = () => {
let currFrame = frames;
setTimeout(() => {fps = frames - lastCount; console.log(fps); simpleFPSCounter()}, 1000);


On a 59-60Hz display, this will log "60". On a 75hz display, it logs "75", and so on and so forth,cycle%20%28or%20windows%20compositing%20manager%2C%20for%20that%20matter%29.

"In Chrome, the time parameter of requestAnimationFrame is VSYNC time.."

xxpertHacker (860)

Some questions (since I think that this is an XY problem):

  • Why does it delay 50 seconds?

  • Are there any particular reasons that you're using base64 encoding to send binary? WS protocol supports sending plain binary, and the JS API supports receving ArrayBuffers.

  • Would HTML's <video> suit your needs instead? (It supports streaming)

  • Why do you need to load frame-by-frame?

programmeruser (571)

1. Since it takes time to process the video
2. It makes it easier to construct a data URL
3. This was an experiment
4. This was an experiment

xxpertHacker (860)

2) wait, what's a data URL?
3, 4) Why? Seems like an XY problem then.

xxpertHacker (860)

@programmeruser Oh, I still recognize them by URI, not URL, but I see that changed :/

Coder100 (17034)

are you sure the images go one after the other? @programmeruser

Coder100 (17034)

like in the terminal, it isn't guaranteed that the flush is instant @programmeruser

xxpertHacker (860)

@programmeruser Seems like in-between frames, it shows the initial frame. Sure, I'll check it out, I have time.