Question

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.getElementById("canvasId").getContext("2d");

var width = 150; 

var height = 105; 


context.beginPath();
context.moveTo(75, 0);       
context.lineTo(150, 105); 
context.lineTo(0, 105);       
context.closePath();


context.fillStyle = "#ffc821";
context.fill();

Thank you for the support

Answer 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.