Les régions

Selon la façon dont vous souhaitez supporter des navigateurs différents et plus anciens, il existe addHitRegion() que vous pouvez utiliser en vous permettant par le biais de drapeaux dans Firefox et Chrome (au moment de l'écriture):

Firefox: à propos de: config -> recherche "hitregions" et défini sur true
Chrome: chrome: // flags / -> Activer les fonctionnalités de la toile expérimentale

C'est la seule technique qui s'intègre directement au système événementiel. Je ne le recommanderais pas encore pour la production, et AFAIK, il n'y a pas non plus un polyfill, mais pour montrer combien il est facile à utiliser:

 var x=document.getElementById("canvas"); var ctx=x.getContext("2d"); ctx.rect(20,20,150,100); ctx.addHitRegion({id: "demo"}); // enable in flags in Chrome/Firefox ctx.stroke(); x.addEventListener("click", function(e) { if (e.region && e.region === "demo") alert("Hit!"); }) 

 <canvas id="canvas"></canvas> 

Les formes et les chemins sont attirés sur la toile comme effets secondaires, donc il n'y a aucun élément pour ajouter un auditeur d'événement; Vous pouvez, cependant, ajouter un auditeur d'événement à l'ensemble du canevas ou à un élément qui partage un emplacement avec le canevas, et lorsque vous cliquez dessus, redessinez le canevas avec le rectangle mais rouge (ou tout autre chose changé). (Assurez-vous d'effacer le canevas avant de le redessiner avec la méthode .clearRect() ).

Si vous dessinez quelque chose sur un canevas, la forme dessinée n'est pas un objet javascript, mais modifie l'état particulier dans lequel se trouve le canevas. Par conséquent, vous ne pouvez pas vous attacher un auditeur d'événement, et vous devez plutôt attacher l'événement au La toile elle-même.

Votre javascript pourrait alors vérifier les coordonnées du clic et déterminer s'il se trouve ou non dans le rectangle. Gardez à l'esprit que si vous dessinez quelque chose sur le rectangle ou la forme, le code devra être ajusté pour vérifier la nouvelle zone formée. Vous pourriez également avoir du mal à vérifier la zone si ce n'est pas un rectangle, mais il sera toujours possible.

Si vous souhaitez redessiner le rectangle comme rouge, vous devez repeindre le canevas, en changeant la couleur du nouveau rectangle que vous redessinez (le rectangle n'est pas un objet, donc vous ne pouvez pas modifier la couleur directement). Cela impliquerait également de repeindre toutes les autres formes sur la toile.