将HTML文本与画布混合

我目前正在一些HTML元素下面渲染一个画布(目前是a h1和a span).画布包含一个基于具有两种主要颜色的图像的万花筒:一个非常暗(几乎是黑色),一个非常明亮,可以通过移动鼠标来移动它.HTML元素使用color: white样式呈现.

我遇到的问题是万花筒呈现出巨大的白色部分.文本变得不可见.是否可以使文本在其下方显示画布部分的负色？因此,例如,如果文本下的画布部分是白色,文本将是黑色的？以下是问题的屏幕截图:

您可以将颜色设置为白色并使用css混合模式差异:

h1{
  color:white;
  mix-blend-mode: difference;
}

演示