Плагин Dimensions замеряет расстояния через canvas. Реализация выглядит достаточно сложно...
Глаза боятся, а руки делают. Реализация не такая уж и сложная. Если на пальцах, то основной скрипт в основе dimensions берет данные по цветам всех пикселей картинки, координаты, откуда начать, а дальше просто ходит влево, вправо, вверх и вниз по пикселям и смотрит, насколько они отличаются по цвету. Если сильно отличаются - значит у нас нашлась граница между элементами. Сколько пикселей насчитал до границы - столько и показывает нам в ответ. И дальше весь вопрос в том, откуда взять картинку и координаты. В случае с расширением для браузера - он делает скриншот страницы и берет текущие координаты мышки. Но можно этот скрипт и отдельно от расширения использовать, просто скармливая ему свои картинки и координаты - это универсальная штука.
Поскольку скрипт ходит по пикселям туда-сюда и ищет границы - он может находить их вне зависимости от их формы, не только прямоугольные. Это в нем самое важное. Принципиально более простое решение той же задачи вы не придумаете. В любом случае придется искать границы.
Если делать тупую линейку чисто в браузере чисто до прямоугольных границ элементов, то можно было бы брать getBoundingClientRect и координаты мыши и вычитать одно из другого. Это будет более простое решение более простой задачи. Но не той же самой.
