18

if I draw to the canvas a lot in quick succession, e.g. a context.fillRect in a loop, browsers seem to wait until the loop has finished before any of the drawing is displayed (possibly via double-buffering)

Is there any way to force the browser to update the display, either explicitly or implicitly after each draw operation?

skaffman
  • 398,947
  • 96
  • 818
  • 769
James Tauber
  • 3,386
  • 6
  • 27
  • 37

2 Answers2

19

It is not really because of any double-buffering that you don't see the results, but rather because JavaScript in the web browser is single-threaded. If you similarly create a single loop in JavaScript that repeatedly does something like myDiv.style.top = parseInt(myDiv.style.top) + 1 +"px"; you will see that nothing will visibly change in the browser—even over many seconds—until your JavaScript has finished executing.

To draw changes and see the results on the screen, you need to use setInterval or setTimeout to yield control back to the browser but ask to run code at some point in the future.

For example, to draw a new random, randomly-colored rectangle on the canvas 15 times a second:

var canvas = document.getElementsByTagName('canvas')[0];
var ctx = canvas.getContext('2d');
setInterval(function(){
  ctx.clearRect(0,0,canvas.width,canvas.height);
  var r=Math.random()*255, g=Math.random()*255, b=Math.random()*255;
  ctx.fillStyle = 'rgb('+r+','+g+','+b+')';
  var w=Math.random()*canvas.width,     h=Math.random()*canvas.height;
  var x=Math.random()*(canvas.width-w), y=Math.random()*(canvas.height-h);
  ctx.fillRect(x,y,w,h);
},1000/15);
Phrogz
  • 296,393
  • 112
  • 651
  • 745
0

It is better to use window.requestAnimationFrame() for better browser behaviour.

Martin Tournoij
  • 26,737
  • 24
  • 105
  • 146
jjff55
  • 1
  • 1
    Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Nov 07 '21 at 10:28
  • Hi @jjff55 your answer is good, but consider that the question was asked 10 years ago, when `requestAnimationFrame` was pratically not existant. Your answer is just a little... Out of time, let's say – DDomen Nov 07 '21 at 18:32
  • 1
    It's fine – even encouraged – to answer old questions @DDomen; I landed here because even though it's ten years later, I'm having the same problem, and this is one of the top results. Having all solutions here – new and old – is useful! – Martin Tournoij Dec 07 '21 at 22:05
  • @MartinTournoij thank you for your point, it made me check better again the SO policy. Even though, the answer is not addressing the question but just a minor part, it could be better to expand it anyway (probably the user can not comment the older answer, so it make sense to expand this one) – DDomen Dec 08 '21 at 23:13
  • Oh yes, it's definitely too short/vague to be a good answer @DDomen; I actually couldn't figure out how to make it work from the MDN page and just went with the setTimeout() method instead. – Martin Tournoij Dec 09 '21 at 08:39