Question

I’d like to fill the background of a web page with zeroes.

(Technically, I want something like this:

0 0 0 0  ...
 0 0 0 0 ...
0 0 0 0  ...
etc.

But I can get there easily from a field of zeroes).

I want the zeroes to be dynamic (the one under your mouse lights up, you can click on them and effects start ‘rippling’ through the field, etc.), so I can’t just tile a background. I want them to fill the whole screen without causing any scrolling.

I can think of a few ways to do this. The two obvious ones are calculating window height and making a table with javascript, and drawing on a big fat canvas. Handling resize events probably wouldn’t be fun in the former scenario, making the zero hover in reaction to mouse movement would be less fun in the latter scenario.

What’s the idiomatic way to do this? Is there an easy way to get the effect I want?

Answer 1

Personally I’d use a canvas; it will respond better to animation effects when the mouse moves because the browser doesn’t have to update thousands of elements (assuming each 0 is in a <span> or something – required for animation).

You could do it with conventional HTML, but for speed purposes you should use a canvas.

Set the canvas’ width and height using some JS on page load, and change it accordingly when the window resizes.

SVG may be an option but again there are speed issues as the SVG image is an XML document with elements much the same as HTML.

The only other option is Flash, but I highly discourage this path; a canvas is much more suited to your problem.