Rectangle Interaction

Question

I have a canvas element on my simple HTML page and it has several rectangles drawn using the context.fillRect() method. I need to interact with these drawn rectangles.

How can i do this? How can I snap onclick or onmouseover with these rectangles?

Answer 1

You will need to track the coordinates and check if the mouse is in one of these rectangles: http://jsfiddle.net/eGjak/13/ .

Obviously, you can also use mouseover instead of click .

 var ctx = $('#cv').get(0).getContext('2d'); var rects = [[0, 0, 100, 100], [0, 150, 50, 100]]; // [x, y, width, height] for(var i=0;i<rects.length;i++) { ctx.fillRect(rects[i][0], // fill at (x, y) with (width, height) rects[i][1], rects[i][2], rects[i][3]); } $('#cv').click(function(e) { var x = e.offsetX, y = e.offsetY; for(var i=0;i<rects.length;i++) { // check whether: if(x > rects[i][0] // mouse x between x and x + width && x < rects[i][0] + rects[i][2] && y > rects[i][1] // mouse y between y and y + height && y < rects[i][1] + rects[i][3]) { alert('Rectangle ' + i + ' clicked'); } } }); 

Answer 2

I wrote several guides on how to create and move selectable shapes on canvas, which should give you a good idea of ​​what you need.

The short answer is that you just need to keep track of everything you want to choose.