changing the canvas element color on mouse over

changing the canvas element color on mouse over

hi team,

I have a canvas element and i created one circle inside the canvas container, now on mouse over and mouseout  i want to change the color of it. Instead of writing two functions for mouseout and mouseover is there any way like binding events(mouseover and mouseout). I have id of canvas container but not the circle id nor class of it.

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4.  <script src="http://code.jquery.com/jquery-latest.js"></script>
  5. <script type="text/javascript">
  6. function changeclr(){
  7. var cnvs = document.getElementById("mycanvas");
  8. var context = cnvs.getContext("2d");

  9. var d = cnvs.height/4;
  10. var x = cnvs.width/2;
  11. var y = cnvs.height/2;
  12. context.beginPath();
  13. context.arc(x,y,d,0,2*Math.PI);
  14. context.lineWidth = 10;
  15. context.strokeStyle="green"
  16. context.stroke();
  17. }

  18. </script>
  19. </head>
  20. <body>
  21. <canvas id="mycanvas" onmouseover = "changeclr()" height="200px" width="300px" style="border:1px solid red">
  22. Your browser does not suppert the canvas tag
  23. </canvas>
  24. <script type="text/javascript">
  25. var circle = function (width,height,dia,start,stop,clr,lnwidth)
  26. {
  27. var cnvs = document.getElementById("mycanvas");
  28. var context = cnvs.getContext("2d");

  29. var d = dia;
  30. var x = width;
  31. var y = height;
  32. var strt = start;
  33. var stp = stop;

  34. context.beginPath();
  35. context.arc(x,y,d,strt,stp);
  36. context.lineWidth = lnwidth;
  37. context.strokeStyle = clr;
  38. context.stroke();
  39. }

  40. var cr = new circle(150,100,50,0,2*Math.PI,"red",10);
  41. </script>
  42. </body>
  43. </html>
I want to change the strokecolor, onmouseover and mouse out. 

Please help me out. how to bind the events to it.

Thanks & Regard
sai krishna