Speed up canvas rendering using putImageData

[dazuma]

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.

[sunng87]

Thank you very much !

The performance of HeatCanvas has been there for a long time. I will create a branch to apply your suggestion.

[sunng87]

Thank you for you suggestion. The enhancement has been merged into master.