Draw a number of pixels and a magnifier with serial numbers in Javascript

I have a webpage where there is a rectangle (preferably with rounded borders) in which I need to display a specific number of pixels in a specified color (the background will be white or black). Each pixel will have a unique serial number associated with it which I would like to display when a user mouses over the pixel. I would like to implement this drawing code in Javascript and I would like for it to have a look somewhat similar to the graphic shown (the mouse cursor is a magnifying glass, if possible, and the magnified view shows rounded, colored squares each with a serial number). The serial numbers will need to be fetched via AJAX in a PHP script. There may be too many to display in the display area, so it will be necessary to implement pages via AJAX. I do not need the PHP script programmed, I simply need for it to have the following parameters POSTed to it: pixels_per_page, page_number and it will return a JSON-encoded object {error: boolean, [errorMsg: string], totalPages: int, serials: string array}. I also need some method for the individual pixels to be selectable and for selecting pixels to cause a function call. Suggestions are appreciated. Perhaps clicking locks the magnifier in place, allowing selection of individual pixels. The looks are important, so I am looking for something pretty to fit into this page: [login to view URL]!blank/cqz9.