Merging pixels to minimize paint operations on Html canvas

Question

Hi I'm painting an image onto a canvas (html5) and I want to reduce the number of fillRect calls I'm making in the hope of making the process more efficient.

Note: I'm calling canvas.fillRect to paint individual pixels and pixels can be 1x1 or other size rectangle depending on resolution I'm painting in (So I know that they are not called pixels but my image vocab is limited).

What I would like to do is find and merge individual pixels if they are the same colour. This will reduce the number of calls to fillRect and hopefully be faster than what I currently have.

So lets say I have a bit map like this:

[fff, fff, fff]
[f00, f00, f00]
[00f, 00f, 00f]

Instead of making 9 calls to fillRect I would like to make 3.

So my questions are:

1) What is this process called (so I can do some more intelligent research, as googling 'merging pixels', 'merging rectangles', etc, yields no useful results).

2) Anyone aware of any open source library that implements this (does not have to be javascript)

3) Does anyone think that adding this pre-processing step will actually make the code slower in JS?

Thanks All

Guido Tapia

Answer 1

I would agree with @Jakub that doing this kind of analysis in Javascript is likely to take a lot longer than the time you save by filling fewer rectangles (usually a very fast operation for a graphics card). That is unless you have to paint the same set of rectangles many thousands of times.

As for what it's called, the closest thing I can come up with is run-length encoding, which admittedly is one-dimensional rather than two.