Here is the best seller to add events to individual canvas shapes.
Here's a preview: http://jsfiddle.net/m1erickson/sAFku/
Unlike SVG, after you draw a shape on the canvas, there is no way to identify that shape.
There are no separate figures on the canvas, there is only a canvas with pixels.
To be able to identify and "use" any individual canvas form, you need to remember all the basic properties of this form.
Here are the properties needed to identify the rectangle:
- x-position
- y-position
- width
- height.
You will also want to remember some basic properties of a rectangle style:
- fillcolor,
- strokecolor,
- strokewidth.
So, here's how to create a rectangular class object that remembers all its basic properties.
If you are not familiar with the term “class”, think of it as a “cookie cutter,” which we can use to define the form.
Then we can use the cookie-cutter class to create multiple copies of this shape.
Even better ... the classes are flexible enough to allow us to change the basic properties of each copy we made.
For rectangles, we can use our one class to create many, many rectangles of different widths, heights, colors, and locations.
The key point here is that we create classes because classes are very flexible and reusable!
Here is our rectangular class that “remembers” all the basic information about any custom rectangle.
// the 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 this class to create as many new rectangles as we need ... And we can assign different properties to our new rectangles to meet our diversity needs.
When you create the actual rectangle (filling it with properties), each copy of our cutter cube has its own set of properties.
When we use the cookie-cutter class to create 1 + actual rectangles for drawing on canvas, the resulting real rectangles are called “objects”.
Here we create 3 real rectangular objects from our 1 class. We assigned each real object a different width, height and color.
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 the opportunity to draw themselves on the canvas by adding the draw () function. Here we put canvas context drawing commands and 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 to use the draw () function to draw rectangles on the canvas. Please note that we have 2 rectangle objects, and we must execute .draw () for both of them for 2 rectangles that will be displayed on the 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 the rect class the opportunity to tell us if the point (mouse) is inside this rectangle. When the user generates mouse events, we will use this isPointInside () function to check if the mouse is inside our rectangle.
Finally, we can associate our rectangular class with a regular mouse event system.
We ask jQuery to listen for mouse clicks on the canvas. Then we root this mouse position on the direct object. We use rect isPointInside () to report if the click was inside the rectangle.
// listen for click events and trigger handleMouseDown $("#canvas").click(handleMouseDown); // calc the mouseclick position and test if it inside the rect function handleMouseDown(e){ // calculate the mouse click position mouseX=parseInt(e.clientX-offsetX); mouseY=parseInt(e.clientY-offsetY); // test myRedRect to see if the click was inside if(myRedRect.isPointInside(mouseX,mouseY)){ // we (finally!) get to execute your code! alert("Hello from the "+myRedRect.id); } } // These are the canvas offsets used in handleMouseDown (or any mouseevent handler) var canvasOffset=$("#canvas").offset(); var offsetX=canvasOffset.left; var offsetY=canvasOffset.top;
Well ... how do you "remember" the shape of the canvas and how do you execute the code in your question!
alert("hello from blue square")
This is a basketball “class” that creates various rectangles and mouseclicks posts.
You can use this template as a starting point for listening to all mouse events on all kinds of canvas shapes.
Almost all forms of canvas are rectangular or round.
Rectangular Canvas Elements
- Rectangle
- Picture
- Text
- Line (yes!)
Circular Canvas Elements
- a circle
- Arc
- Normal polygon (yes!)
Irregular canvas elements
- Curves (cubic and square bezier)
- Way
. isPointInside () will look like this for a circle:
// check for point inside a 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, but this usually gets complicated!
Here it is!
Here is some improved code and script: http://jsfiddle.net/m1erickson/sAFku/
<!doctype html> <html> <head> <link rel="stylesheet" type="text/css" media="all" href="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; </script> </head> <body> <canvas id="canvas" width=300 height=300></canvas> </body> </html>