Can i add events to shapes if renderer is Two.CanvasRenderer

[deepakumaro]

i am trying to add EventListener to a shape that i draw using twojs usign Two.CanvasRenderer. i want to know if i can do it like i do for SVG element or i have to detect if i clicked on that shape then dispatch event.

const canvas = document.getElementById('two');

let params = { type: Two.Types.canvas, domElement: canvas, width: 1000, height: 1000 };

let two = new Two(params);

let rect = two.makeRectangle(0, 0, 100, 100);

rect.translation.x = 100; rect.translation.y = 100; rect.fill = 'red'; two.update();

rect.addEventListener('click', () => { / not working when click on shape / console.log('clicked'); });

two.render();

[jonobr1]

With canvas and WebGL you have to do event listening and intersections differently. I'll report back tomorrow with an example.

[jonobr1]

Here's an example: https://codepen.io/jonobr1/pen/gOyqwwL?editors=0010

Move your mouse and when you hover over rectangles it will change color.

[deepakumaro]

thanks for the help @jonobr1 !