Scenario:
- I have an area on the browser screen n x n in size (500px x 500px for example, ie 250,000 pixels).
- As the mouse rolls over the area, it "paints" the pixels it passes.
- Percentage of filled/unfilled pixels are displayed
- Optional advanced scenario: As the mouse rolls over already painted pixels will "unpaint" those pixels, or paints those pixels in a different colour.
Solutions/Issues
- What would be the most efficient way of detecting, logging and displaying the scenario?
- The defined area could be a div, spacer image, image map, table, canvas?
- How would the pixels be drawn?
- image or div created for every mouse movement
- server-side image created based on pixel co-ordinates?
- Is it too inefficient to pass the mouse position(s) every time the position changes?
- What would be an efficient way of displaying 250,000+ dynamic pixels/objects/data?