javascript - Add onclick and onmouseover to canvas element -

i want add onclick, onmouseover , onmouseout events individual shapes in canvas element.

i have tried doing svg in different ways , found no single method work in major browsers.

maybe, there simple way add onclick , other events canvas shapes?

can please show me how add onclick?

here code:

canvas {   background:gainsboro;   border:10px ridge green; } 

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

var c=document.getelementbyid("canvas1");  var ctx=c.getcontext("2d"); ctx.fillstyle="blue"; ctx.fillrect(10,10,60,60);  var ctx=c.getcontext("2d"); ctx.fillstyle="red"; ctx.fillrect(80,60,60,60);  // these need onclick fire them up. how add onclick function blue() {   alert("hello blue square") }  function red() {   alert("hello red square") } 

here barebones framework adding events individual canvas shapes

here's preview: http://jsfiddle.net/m1erickson/safku/

unlike svg, after draw shape canvas, there no way identify shape.

on canvas, there no individual shapes, there canvas full of pixels.

to able identity , “use” individual canvas shape, need remember basic properties of shape.

here properties necessary identify rectangle:

• x-position,
• y-position,
• width,
• height.

you want remember basic styling properties of rectangle:

• fillcolor,
• strokecolor,
• strokewidth.

so here how create rectangle “class” object remembers of it’s own basic properties.

if you're not familiar term "class", think of "cookie-cutter" can use define shape.

then can use "cookie-cutter" class create multiple copies of shape.

even better ... classes flexible enough let modify basic properties of each copy make.

for rectangles, can use our 1 class make many, many rectangles of different widths, heights, colors , locations.

the key here create classes because classes very flexible , reusable!

here our rect class "remembers" basic info custom rectangle.

// rect class   function rect(id,x,y,width,height,fill,stroke,strokewidth) {     this.x=x;     this.y=y;     this.id=id;     this.width=width;     this.height=height;     this.fill=fill||"gray";     this.stroke=stroke||"skyblue";     this.strokewidth=strokewidth||2; } 

we can reuse class create many new rectangles need...and can assign different properties our new rectangles meet our needs variety.

when create actual rectangle (by filling in it's properties), every "cookie-cutter" copy of our class has own private set of properties.

when use "cookie-cutter" class create 1+ actual rectangles draw on canvas, resulting real rectangles called "objects".

here create 3 real rectangle objects our 1 class. have assigned each real object different width, height , colors.

var myredrect = new rect("red-rectangle",15,35,65,60,"red","black",3);  var mygreenrect = new rect("green-rectangle",115,55,50,50,"green","black",3);  var mybluerect = new rect("blue-rectangle",215,95,25,20,"blue","black",3); 

now let’s give our class ability draw on canvas adding draw() function. put canvas context drawing commands , styling commands.

rect.prototype.draw(){     ctx.save();     ctx.beginpath();     ctx.fillstyle=this.fill;     ctx.strokestyle=this.stroke;     ctx.linewidth=this.strokewidth;     ctx.rect(x,y,this.width,this.height);     ctx.stroke();     ctx.fill();     ctx.restore(); } 

here’s how use draw() function draw rectangles on canvas. notice have 2 rectangle objects , must execute .draw() on both of them 2 rects show on canvas.

var myredrect = new rect("red-rectangle",15,35,65,60,"red","black",3); myredrect.draw();  var mybluerect = new rect("blue-rectangle",125,85,100,100,"blue","orange",3); mybluerect.draw(); 

now give rect class ability let know if point (mouse) inside rect. when user generates mouse events, use ispointinside() function test if mouse inside our rect.

// accept point (mouseposition) , report if it’s inside rect  rect.prototype.ispointinside = function(x,y){     return( x>=this.x              && x<=this.x+this.width             && y>=this.y             && y<=this.y+this.height); } 

finally can tie our rect class normal browser mouse event system.

we ask jquery listen mouse clicks on canvas. feed mouse position rect object. use rect's ispointinside() report if click inside rect.

// listen click events , trigger handlemousedown $("#canvas").click(handlemousedown);  // calc mouseclick position , test if it's inside rect function handlemousedown(e){      // calculate mouse click position     mousex=parseint(e.clientx-offsetx);     mousey=parseint(e.clienty-offsety);      // test myredrect see if click inside     if(myredrect.ispointinside(mousex,mousey)){          // (finally!) execute code!         alert("hello "+myredrect.id);     } }  // these canvas offsets used in handlemousedown (or mouseevent handler) var canvasoffset=$("#canvas").offset(); var offsetx=canvasoffset.left; var offsety=canvasoffset.top; 

well...that's how "remember" canvas shapes & how execute code in question!

alert("hello blue square") 

that’s barebones “class” creates various rectangles , reports mouseclicks.

you can use template starting point listen mouse-events on kinds of canvas shapes.

almost canvas shapes either rectangular or circular.

rectangular canvas elements

• rectangle
• image
• text
• line (yes!)

circular canvas elements

• circle
• arc
• regular polygon (yes!)

irregular canvas elements

• curves (cubic & quad beziers)
• path

the ispointinside() circle:

// check point inside circlular shape circle.prototype.ispointinside = function(x,y){     var dx = circlecenterx-x;     var dy = circlecentery-y;     return( dx*dx+dy*dy <= circleradius*circleradius ); } 

even irregularly shaped canvas elements can have ispointinside, gets complicated!

that’s it!

here enhanced code , fiddle: http://jsfiddle.net/m1erickson/safku/

<!doctype html> <html> <head> <link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>  <style>     body{ background-color: ivory; }     canvas{border:1px solid red;} </style>  <script> $(function(){      var canvas=document.getelementbyid("canvas");     var ctx=canvas.getcontext("2d");     var canvasoffset=$("#canvas").offset();     var offsetx=canvasoffset.left;     var offsety=canvasoffset.top;      //     var rect = (function () {          // constructor         function rect(id,x,y,width,height,fill,stroke,strokewidth) {             this.x=x;             this.y=y;             this.id=id;             this.width=width;             this.height=height;             this.fill=fill||"gray";             this.stroke=stroke||"skyblue";             this.strokewidth=strokewidth||2;             this.redraw(this.x,this.y);             return(this);         }         //         rect.prototype.redraw = function(x,y){             this.x=x;             this.y=y;             ctx.save();             ctx.beginpath();             ctx.fillstyle=this.fill;             ctx.strokestyle=this.stroke;             ctx.linewidth=this.strokewidth;             ctx.rect(x,y,this.width,this.height);             ctx.stroke();             ctx.fill();             ctx.restore();             return(this);         }         //         rect.prototype.ispointinside = function(x,y){             return( x>=this.x                      && x<=this.x+this.width                     && y>=this.y                     && y<=this.y+this.height);         }           return rect;     })();       //     function handlemousedown(e){       mousex=parseint(e.clientx-offsetx);       mousey=parseint(e.clienty-offsety);        // put mousedown stuff here       var clicked="";       for(var i=0;i<rects.length;i++){           if(rects[i].ispointinside(mousex,mousey)){               clicked+=rects[i].id+" "           }       }       if(clicked.length>0){ alert("clicked rectangles: "+clicked); }     }       //     var rects=[];     //     rects.push(new rect("red-rectangle",15,35,65,60,"red","black",3));     rects.push(new rect("green-rectangle",60,80,70,50,"green","black",6));     rects.push(new rect("blue-rectangle",125,25,10,10,"blue","black",3));      //     $("#canvas").click(handlemousedown);   }); // end $(function(){}); </script>  </head>  <body>     <canvas id="canvas" width=300 height=300></canvas> </body> </html>