координаты пикселей на ромбе

Я получил изображение с парой ромбов, расположенных рядом, как на изображении ниже

Единственные координаты, которые я знаю на изображении, это верхние углы (зеленые текст).
Когда я нажимаю на изображение, я получаю координаты этой точки, но я не могу понять, на каком алмазе я нахожусь.
Например, я нажимаю на красную точку, как я узнаю, что x:260, y:179 = верхний ромб?
А синий принадлежит левым? и т.д...

Большое спасибо за помощь.

РЕДАКТИРОВАТЬ:
В конце концов я использовал Canvas, но я думаю, что SVG также сработал бы для того, что мне нужно было сделать.