When playing around with some canvas stuff I found an interesting bug in Chrome. Basically when you have a putImageData call inside of a setInterval loop, canvas does not refresh properly.

There’s a pretty simple hack to fix this: force the canvas to refresh every time you call putImageData. But how do you do this? There is no redraw function, nor any obvious way to force a refresh.

The trick is making a change to some property of the canvas element. Doing this in a way that forces a refresh every frame but won’t actually change anything for the user is not as obvious as you’d think.

Opacity isn’t actually visible with a sufficiently small delta, so it’s a good candidate. We just switch back and forth between two different opacities.

this.ctx.putImageData(img, x, y);
this.rebuild_chrome_hack = !this.rebuild_chrome_hack;
$('#canvas').css('background-color', this.rebuild_chrome_hack ? 1 : 0.999);