Interakcja z płótnem canvas

Question

Cześć, zastanawiam się jak w canvasie robi się podstawową interakcję z użytkownikiem? Chodzi mi o coś typu, że narysowałem sobie kilka kwadratów i po najechaniu na nie na przykład wyświetla mi się w chmurce obok myszki kolor tego kwadratu lub po kliknięciu w niego zmienia się mu  kolor. O ile na elementach DOM jest to banalnie proste, to nie umiem sobie tego wyobrazić w canvasie.

Answer 1

To się łączy, gdyż korzystając z Canvasa przechwytujesz eventy dla canvas. click, mouseover itp. 

Comments

Nie rozumiem. Mógłbyś to bardziej rozwinąć?

---

Po prostu jest ad event listner i po jakims wydarzeniu: np clicku wykonuje sie jakas funckja np. zmieniajaca kolor itp
np :
addEventListener("mousemove",playerPosition); w tym wypadku zdarzeniem jest ruch myszka i on wywoluje funkcje playerPosition.

---

(function (){
	var canvasEl = document.querySelector('#canvasEl');
  canvasEl.addEventListener('click', function () {
  	console.log(':D');
  }, false);
})();

<canvas height="300" width="200" id="canvasEl"></canvas>

---

https://www.youtube.com/watch?v=JNf9dOXiDuA

Answer 2

Przejrzyj sobie przykłady z dokumentacji:
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Advanced_animations

Niżej jest taki wymowny przykład z piłeczką, sterowaną myszką na canvasie.