Over sur rectangle

Bonjour, je suis débutant en html5, je voudrais savoir comment vous faites pour changer la couleur d'un carré par exemple sans avoir de duplication de code dans le javascript.

Voici mon code :

Code html5

Code:

---

<a href="#"><canvas onmouseover="over()" onmouseout="draw()" id="rect" width="50" height="60"></canvas></a>

---

Mon code javascript

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

function over(){   var canvas = document.getElementById('rect'); var ctx = canvas.getContext('2d');   ctx.fillStyle = "rgba(240,0,0, 1)"; ctx.fillRect (0, 7, 24, 24); }   function draw() { var canvas = document.getElementById('rect'); var ctx = canvas.getContext('2d');     ctx.fillStyle = "rgba(240,95,93, 1)"; ctx.fillRect (0, 7, 24, 24);   }

---

Bonjour,
pourquoi pas simplement en CSS ?

Code:

---

1 2 3 4

<style type="text/css"> #rect { width:50px; height:60px; background:rgba(240,0,0, 1); } #rect:hover { background:rgba(240,95,93, 1); } </style>

---

Code:

---

<a href="#"><canvas id="rect"></canvas></a>

---

Bonjour,

en fait j'ai pris un cas simple d'utilisation. Mais j'aurais dans mon canvas plusieurs formes géométriques, et je voudrais qu'au survol, qu'il n'y en ait que certaines qui réagissent.