Closed deepakumaro closed 3 months ago
With canvas and WebGL you have to do event listening and intersections differently. I'll report back tomorrow with an example.
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.
thanks for the help @jonobr1 !
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();