sunng87/heatcanvas — Issue #5: Speed up canvas rendering using putImageData
Author: dazuma
Created: 2012-02-08 22:17:19+00:00
State: open

Hi,

I had actually written something similar for one of my projects. Just wanted to pass on a suggestion based on what I had done.

Currently, you're rendering by calling context.fillRect() for each pixel. This can actually get quite slow. You might consider manipulating an ImageData directly. Call context.createImageData() to get an offscreen ImageData object. Then you can set pixels simply by setting rgba values in the data array. Finally, render the entire image back to the canvas using context.putImageData(). It generally turns out many, many times faster than the thousands of fillRect calls.

The downside is that you can't use the css-like syntax to set colors; you have to set raw rgba values numerically. But it may be a worthwhile trade-off.