Use canvas tag or create a bunch of <div's> Whats faster?

Question

Hey I have an array of hexadecimal colors and for each color in the array I want to create a 80px by 80px square representing that color. What would be faster performance wise?

1: Use the canvas tag iterating over the array and using the fillStyle and fillRect();

or

2: Iterating over the array and creating a div box and setting the background color of the div to the current color in the array.

Note: I have 1034 colors and I am open the other suggestions but it has to be web based and can not be flash.

Answer 1

I would use divs, if only for the cross browser ease.

Actually, I'd try and do it in a server side language, and then cache the results. Does the client need to interact with these shapes or do anything with them that would make this not an option?

Answer 2

I'd personally go for canvas (excanvas.js for VML emulating in IE will do the job). For simplicity and future code expansion reasons.

The trouble is, while browsers with native canvas implementation will perform better with the 1st option, IE should be faster using DIVs (2nd method). It's due the emulation practice, that is creating VML elements on the fly (there are simply more elements to be created than DIVs only method assumes).

It's just a speculation though:), write some tests and compare.

Answer 3

Do it in javascript with document.createElement('div') for simplicity and speed (you aren't downloading 1034 blocks of HTML markup and it will work everywhere).