Force a Canvas Refresh
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);