Пользовательский globalCompositeOperation в HTML5 Canvas

Question

Я смотрю на все различные типы глобальных составных операций здесь:

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation

Никто из них не делает именно то, что я хочу сделать. Есть ли способ определить пользовательский globalCompositeOperation? Было бы идеально, если бы я мог создать шейдер и затем использовать его каждый раз, когда я рисую что-то с помощью метода CanvasRenderingContext2D.draw.

В частности, для каждого пикселя я хочу, чтобы следующие методы (код psuedo) использовались методами CanvasRenderingContext2D.draw:

if the existing canvas color alpha is 0.0, 
    then draw the new shape's color and set alpha to 0.1
if the existing canvas color is the same as the new shape's color
    then increase the alpha, by 0.1
if the existing canvas color is different from the the new shape's color
    then decrease the alpha by 0.1

Я даже думаю об этом правильно? Я чувствую, что мне следует каким-то образом использовать WebGLRenderingContext, но я немного шокирован тем, как все это сочетается.

Answer 1

Ответ в основном нет.

Там нет никакого способа, чтобы определить свой собственный globalCompositeOperation с Canvas2D.

2 решения с моей головы

1. Используйте 2 холста, 2-й и WebGL

   for each shape
      clear the 2d canvas
      draw the shape into the 2d canvas
      upload the canvas to a webgl texture
      composite that texture with the previous results using a custom shader.
   

   Проблема с этим решением в том, что оно будет медленным, потому что загрузка холста в текстуру является относительно медленной операцией. Но это означает, что вы можете использовать все функции холста, такие как stroke а также arc и градиенты и т.д., чтобы построить его форму.

2. Полностью перейти на WebGL

   Проблема здесь в том, что у вас не будет доступа ко всем функциям 2D API, и воспроизведение ВСЕХ из них - большая работа.

   С другой стороны, если вы используете только ограниченный набор из них, это может быть не слишком много работы. Например, если вы используете только drawImage, fillRect, clear, и возможно moveTo а также lineTo, fill а также stroke тогда было бы относительно легко воспроизвести в WebGL. Если вы используете множество функций, таких как маскирование, кривые Безье, градиенты или шаблоны, это начинает становиться гораздо более трудоемким.

Для начала вот учебник, который представляет определенный вид композитинга или обработки изображений, который является основным методом для globalCompositeOperation в WebGL. Оба вышеуказанных решения потребовали бы этого базового типа решения для объединения результатов после каждого shape,