How to dynamically change color based on background?

Hi guys, I reckon the title reveals a lot about my question already.

I'm having trouble with this problem and I don't know how to solve it. Basically I have a 300x300px blue circle that follows the cursor where ever it goes. Now the colors are not a problem if the circle is on, let's say a white background but when I move my cursor onto a background with the same colour as the circle the circle blends in obviously. Is there a way to change the color of the circle when it's on a background with a specific color?

Here's my pen: http://codepen.io/bayron2304/pen/VKvOoZ

Thanks for any help!

 

Generally speaking, no... You're not using system cursors so inverse colour is unavailable -- but really welcome to why mouse controlled cursors are rarely if ever monochromatic. Take the normal windows pointers? Are they solid white? Are they solid black? No, they're a black outline around white that you can add an optional drop-shadow to.

Solution then? don't us a single colour cursor. Give it a border or drop-shadow that is it's luminance opposite.

 

This is quite challenging, as this is my first time someone wants to this this, but I like challenges so I will give this a try.

 

The easiest solution would be adding a white border around the blue circle and making it go over the blue background using z-index:

https://jsfiddle.net/gcpq7x2w/1/