画布吸引了div问题

Question

I'm using a javascript to draw inside a canvas, but I'm getting this weird issue where I cant "draw behind" the div of text, so when I hover over the div, it stops drawing and starts whenever i hover off the div and the line starts to continue where I hover off, but it renders weird line behind the div instead of line with styling like blur.

At this point, I'd like to solve this problem in the way that i can draw behind the text.

Here is my code: (https://codepen.io/Zdendaaa/pen/yXWOmQ)

Any help? Thanks!

Answer 1

To your content div add

pointer-events: none;

According to MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events The CSS property pointer-events allows authors to control under what circumstances (if any) a particular graphic element can become the target of mouse events.

Answer 2

You could just add pointer-events: none as described in the other answer, but this is only a good solution, if you're sure that you don't need any other events on that specific element. For example if you want to place an image inside your content div which should have an hover effect or let's say any kind of link, you're stuck with the same problem again.

A better approach would probably be to just wrap the canvas and your content in another div container and just add your mouseover listener to this wrapping element instead.

In this case you don't have to prohibit certain events on specific elements.

I edited your pen a bit with an example: https://codepen.io/anon/pen/YQbGKL