Mouseleave event triggers while entering an inner text element

[samrvr]

Hi, I'm not sure if I'm going about this the wrong way, but currently, I have a render setup similar to this:

let render = ({
  context,
}: {
  context: CanvasRenderingContext2D;
}) => {
  context.fillStyle = PlaygroundConfig.NODE_BG_COLOR;
  context.beginPath();
  context.arc(x, y, PlaygroundConfig.NODE_RADIUS, 0, 2 * Math.PI);
  context.closePath();
  context.fill();
  
  context.font = `25px Jetbrains Mono, monospace`;
  context.textAlign = 'center';
  context.textBaseline = 'middle';
  context.fillStyle = PlaygroundConfig.NODE_TEXT_COLOR;
  context.fillText(value!.toString(), x, y);
};

I would like to do some stuff when the user hovers over the circle, so naturally, I've set up on:mouseenter and on:mouseleave events on the corresponding Layer component. The events work correctly, however when the mouse touches the text inside the circle, the mouseleave event is triggered, and then when exiting the text and entering the circle area again the mouseenter event is triggered. Ideally, I would only like the mouseleave event to trigger only after the mouse leaves the circle path itself.

I'm fairly new to Canvas, so I wouldn't be surprised if there's a better way to do this where I wouldn't encounter this issue. I'd very much appreciate any help solving this issue :)

[dnass]

This is a bug — thanks for flagging. I'll look into a fix, but if you need a hacky solution in the meantime, you can set context.fillStyle = 'transparent' and redraw the circle again after the text. That should prevent mouseleave from misfiring.