Question

I am currently working on a web application where only single pixel changes are known, which are implemented like an event:

function pixelChanged(x, y, color)

These need to be drawn to a canvas. I have tried two methods to accomplish this:

1. draw pixels directly with fillRect
2. memorize pixels and put them on the canvas with putImageData every few microseconds

Now both of these methods seem to have a poor performance. The first one results in many redraws, the second one redraws the whole image, even if only a little area changed.

My specific question is, if there is a better method to implement this (maybe something like 1., but in some way delayed ?).

And if not, which method of these should I prefer ? How can I optimize it in this case ?

Thanks in advance and best regards,

copy

Answer 1

The approach I took is to break a large image into an NxN grid and redraw the specific areas that have changed. I found a decent size that balances the # of redraws vs the size of a redraw to be around 50x50px. If you need the exact optimal number for maximum px/sec drawn, I have it somewhere from benchmarks.

So if you have a 60×60 change, you’d be re-drawing between 4 and 9 50×50 squares.