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.
- <!DOCTYPE HTML>
- <html>
- <head>
- <script src="http://code.jquery.com/jquery-latest.js"></script>
- <script type="text/javascript">
- function changeclr(){
- var cnvs = document.getElementById("mycanvas");
- var context = cnvs.getContext("2d");
- var d = cnvs.height/4;
- var x = cnvs.width/2;
- var y = cnvs.height/2;
- context.beginPath();
- context.arc(x,y,d,0,2*Math.PI);
- context.lineWidth = 10;
- context.strokeStyle="green"
- context.stroke();
- }
- </script>
- </head>
- <body>
- <canvas id="mycanvas" onmouseover = "changeclr()" height="200px" width="300px" style="border:1px solid red">
- Your browser does not suppert the canvas tag
- </canvas>
- <script type="text/javascript">
- var circle = function (width,height,dia,start,stop,clr,lnwidth)
- {
- var cnvs = document.getElementById("mycanvas");
- var context = cnvs.getContext("2d");
- var d = dia;
- var x = width;
- var y = height;
- var strt = start;
- var stp = stop;
- context.beginPath();
- context.arc(x,y,d,strt,stp);
- context.lineWidth = lnwidth;
- context.strokeStyle = clr;
- context.stroke();
- }
- var cr = new circle(150,100,50,0,2*Math.PI,"red",10);
- </script>
- </body>
- </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