Html5 Canvas And Jquery

I have created a triangle using canvas but i was wondering if there was a way to change the fillStyle color on mouseover as if it were a div and jquery. var context = document.get

Solution 1:

You can do something like this.

What I've done is put the above code into a function, and added a

context.clearRect(0,0,width,height);

which will erase the old triangle. From there I put in a hover for it with the

$('#canvasId').hover(functionIn,functionOut);

notation.

Update: Also, as a side note, you could create a triangle like this using CSS. Here is an example with the canvas one on the top, and CSS one on the bottom.

Update 2:Here is new sample code. @puk is right, my code was not concerned about hover on the triangle itself, but more on the canvas element. But as you listed in your example, you wanted a layered effect with a triangle so that each piece is different. Not sure if you want each piece to highlight individually, but if you do, the example code again contains both a <div> and a <canvas> example. Since an 'element' within the canvas is not known by the browser, you would need to keep track of it. The <div> example will likely be faster overall, and lets the browser handle a lot of the messy details, but has more complicated CSS and hover works a little unexpectedly on the edges (there is areas that are not triangle that will trigger hover). The <canvas> example is a lot more complicated JS code, and might be a little slower, but has what is likely the exact expected behavior.

Solution 2:

I don't think canvas provides internal mouse functionality for its shapes. You have two choices

1. You can do what grant skinner has done with easeljs. You can draw a shape to a temporary canvas, then use context.getImageData(left, top, width, height) to test whether the pixel under the mouse is transparent or not. The benefit is that it works universally without needing to know the bounding box of the shape. The downside is that it is extremely slow.

2. Do what I did, use complex algorithms to determine whether a point is inside or outside of a shape. I will try to set up a jsfiddle example for you.

Here is a jsfiddle example http://jsfiddle.net/pukster/HNA2z/1/ It shows how you can use just plain javascript to catch the mouse events, and do rollover effects for rectangles, circles, and complex polygons. Set k=0 for a rectangle, k=1 for a circle and k=2 for a polygon (warning, the code is very messy).

Box:

function Box(x,y,w,h){
        this.x=x;
        this.y=y;
        this.w=w;
        this.h=h;
        this.color=cOut;
        this.inside = false;

        this.draw=function(){
                ctx.fillStyle=this.color;
                ctx.fillRect(this.x,this.y,this.w,this.h);
        }

        this.onMouseOver=function(){
                this.color=cOver;
                this.draw();
        }
        this.onMouseOut=function(){
                this.color=cOut;
                this.draw();
        }
        this.isInside = function(x,y){
                return (this.x<=x) && (x<=this.x+this.w) && (this.y<=y) && (y<=this.y+this.h);
        }
}

Circle:

function Circle(x,y,r){
        this.x=x;
        this.y=y;
        this.r=r;
        this.color=cOut;
        this.inside = false;

        this.draw=function(){
                ctx.fillStyle=this.color;
                ctx.beginPath();
                ctx.arc(x, y, r, 0, Math.PI*2, true); 
                ctx.closePath();
                ctx.fill();
        }

        this.onMouseOver=function(){
                this.color=cOver;
                this.draw();
        }
        this.onMouseOut=function(){
                this.color=cOut;
                this.draw();
        }
        this.isInside = function(x,y){
                return Math.sqrt((this.x-x)*(this.x-x)+(this.y-y)*(this.y-y))<this.r;
        }
}

Polygon:

function Polygon(points){
        this.points = points;
        this.color=cOut;
        this.inside = false;

        this.draw=function(){
                ctx.fillStyle=this.color;
                ctx.beginPath();
                var x,y;
                x = this.points[0][0]; 
                y = this.points[0][1]; 
                ctx.moveTo(x, y);
                for (var i = 1; i < this.points.length; i++){
                   x = this.points[i][0]; 
                   y = this.points[i][1]; 
                   ctx.lineTo(x, y);
                }
                ctx.closePath();
                ctx.fill();
        }

        this.onMouseOver=function(){
                this.color=cOver;
                this.draw();
        }
        this.onMouseOut=function(){
                this.color=cOut;
                this.draw();
        }
        this.isInside = function(x,y){
            for (var c = false, i = - 1, l = this.points.length, j = l - 1; ++i < l; j = i)((this.points[i][1] <= y && y < this.points[j][1]) || (this.points[j][1] <= y && y < this.points[i][1])) && (x < (this.points[j][0] - this.points[i][0]) * (y - this.points[i][1]) / (this.points[j][1] - this.points[i][1]) + this.points[i][0]) && (c = ! c);
            return c;
        }
}

The mouse capture is a little technical, but here is how I check for transitions:

Transitions:

functiononMouseMove(e){
        var x = (window.Event) ? e.pageX : event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
        var y = (window.Event) ? e.pageY : event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
        if (shape.isInside(x,y) && ! shape.inside){
                shape.inside = true;
                shape.onMouseOver();
        }
        elseif (!shape.isInside(x, y) && shape.inside){
                shape.onMouseOut();
                shape.inside = false;
        }

}