Panie i panowie, siedzę nad tym, przeszukuję internet i nie wiem jaksobie z problemem poradzić. Zainteresowałem się canvasem (w połączeniu z js/jquery) potrafi zrobić ciekawe efekty. Lecz nie mogę sobie poradzic z klikaniem - jest wiele tutoriali, które pokazują klikanie na prostokąt lub koło - co jest akurat proste do zrobienia ale jeśli kształt jest bardziej skomplikowany albo jest umieszczony png.

Jedyne co mi przychodzi do głowy to coś takiego - napisałem prostą funkcję, która analizuje każdy piksel z osobna oddaj mi współrzędne pierwszego "niebiałego" pixela od lewej i pierwszego "niebiałego" od prawej - wtedy mógłbym napisać statement że jeśli kursor jest na osi x pomiędzy y-start - y-stop to wtedy ... i wtedy przekopiować współrzędne - lecz jak będzie tych obiektów dużo, różnych, o różnym kształcie to wydaje mi się, że to nie jest optymalne rozwiązanie, a wręcz jestem przekonany, że musi być na to inny sposób. Pomóżcie proszę.

Na wklęsłych obiektach metoda nie zadziała, już widać to na podbródku.

Jeśli jest tylko jeden obiekt, możesz sprawdzić po prostu kolor klikniętego piksela (zakładając, że obiekt nie posiada białych).
Jeśli więcej, to najłatwiej trzymać współrzędnego obiektów jako bounding rectangle, czyli po prostu prostokąta obejmującego najbardziej wystające "wierzchołki" każdej krawędzi.

Może łatwiej byłoby Ci z SVG.

kiedy powinno się użyć svg a kiedy canvasa?

Canvas do obsługi bitmap (duże bitmapy, filtry, operacje bitowe), SVG do wektorów.

Gdybyś chciał znajdywać kontur, to należałoby posłużyć się metodą marching ants.
Jeśli zastosujesz bounding rectangle, to w przypadku kilku obiektów zaczynasz od tego na najwyższej warstwie (kolejność musisz przechowywać w jakiejś tablicy).

Co chcesz osiągnąć?

Mam mapę świata i na niej są poumieszczane przeróżne obiekty i muszą być "klikalne"

to w takim razie zapoznam się z svg. Może to będzie lepsze rozwiązanie. Jest taka gra karciana TUTAJ i w przeglądarce wyświetlana jako canvas więc raczej w canvasie zrobiona? No i sobie jakoś bez trudu poradzili z klikaniem na obiekty.

Nie logowałem się tam, więc nie wiem.

Być może jest to połączenie canvas i SVG, albo canvas na canvas.

Jeszcze jest coś takiego jak tag <area> i <map>.
http://mattstow.com/experiment/responsive-...ps.html#bubbles

O TO do mojego projektu w zupełności wystarczy! dziękuje serdecznie.