Javascript canvas detect click on form

Question

I have a problem with the click function in javascript. This is my code:

var canvas = document.getElementsByTagName("canvas")[0]; var ctx = canvas.getContext('2d'); BigCircle = function(x, y, color, circleSize) { ctx.shadowBlur = 10; ctx.shadowColor = color; ctx.beginPath(); ctx.arc(x, y, circleSize, 0, Math.PI * 2, true); ctx.fill(); ctx.closePath(); }; var bigGreen = new BigCircle(1580, 800, '#5eb62b', 180); function init() { $("#bigGreen").click(function(e){ alert("test"); }); } $(document).ready(function() { init(); }); 

But the click event does not work! Does anyone know why? Thank you so much in advance!

Answer 1

without seeing your html, this question is a bit unclear, it seems you would like to draw something on the canvas and use jquery to add click events for the circle, this is not possible.

you can use jquery to get the click event on the canvas and from the cursor position, which you can calculate if the user clicked on the circle or not, but jquery does not help you here, you need to do the math yourself.

jquery only works for dom elements.

 BigCircle = function(ctx,x, y, color, circleSize) { ctx.beginPath(); ctx.arc(x, y, circleSize, 0, Math.PI * 2, true); ctx.fillStyle=color ctx.fill(); ctx.closePath(); this.clicked=function(){ ctx.fillStyle='#ff0000' ctx.fill(); } }; function init() { var canvas = document.getElementsByTagName("canvas")[0]; var ctx = canvas.getContext('2d'); var bigGreen = new BigCircle(ctx,50, 50, '#5eb62b', 50); $('#canvas').click(function(e){ var x = e.clientX , y = e.clientY if(Math.pow(x-50,2)+Math.pow(y-50,2) < Math.pow(50,2)) bigGreen.clicked() }) } $(document).ready(function() { init(); }); 

jsfiddle here http://jsfiddle.net/yXVrk/1/

Answer 2

Now you can use the hit areas in Chrome and Firefox:

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility#Hit_regions

 ctx.beginPath(); ctx.arc(70, 80, 10, 0, 2 * Math.PI, false); ctx.fill(); ctx.addHitRegion({id: "bigGreen"}); 

and add callback

 canvas.onclick = function (event) { if (event.region) { alert('You clicked ' + event.region); } } 

or just use one of the many canvas APIs:

http://www.fabricjs.com/

http://www.createjs.com/easeljs

http://www.paperjs.org

etc...

Answer 3

bigGreen is not in HTML, so $ ("# bigGreen") doesn't select anything. You cannot put a click function on things like JavaScript functions; since they do not exist in the DOM, how could you click one? You must replace #bigGreen with #canvas, since "canvas" is your HTML element.

I deployed your script to show here here .

Change If you want to see a user click on a specific circle, you use the click event of the canvas, and then you determine which circle the coordinates passed to the click event clicked on.

Answer 4

You can try jcanvas

http://projects.calebevans.me/jcanvas/docs/mouseEvents/

 // Click the star to make it spin $('canvas').drawPolygon({ layer: true, fillStyle: '#c33', x: 100, y: 100, radius: 50, sides: 5, concavity: 0.5, click: function(layer) { // Spin star $(this).animateLayer(layer, { rotate: '+=144' }); } });