Рисование пикселей в зависимости от положения мыши

Question

Сценарий:

• У меня есть область на экране браузера n x n размером (например, 500px x 500px, т.е. 250000 пикселей).
• Когда курсор мыши перемещается по области, он «рисует» пиксели, которые он пропускает.
• Процентная доля заполненных / незаполненных пикселей отображаются
• Необязательный расширенный сценарий : при наведении курсора мыши на уже закрашенные пиксели эти пиксели будут "неокрашены" или окрашены в другой цвет.

Решения / Вопросы

• Каким будет самый эффективный способ обнаружения, регистрации и отображения сценария?
• Определенная область может быть div, spacer image, map map, table, canvas?
• Как будут отображаться пиксели?
  • изображение или div, созданные для каждого движения мыши
  • серверное изображение, созданное на основе координат пикселей?
• Слишком неэффективно пропускать положение мыши при каждом изменении положения?
• Каким был бы эффективный способ отображения 250 000+ динамических пикселей / объектов / данных?

Answer 1

Проверьте мой недавний вопрос для рисунка на холсте, я получил много хороших ответов.