htmlcanvasblendingglobalcompositeoperation

Defining how 2 separate, overlapping canvases blend

I basically want to put a canvas on top of another and define the way their contents are blended.

I have one white canvas with black characters on it, and I want to highlight a part of it with a transparent blue rectangle, without having my black characters in the background turning dark blue. In fact, I need the aspect I'd get if I merged the two canvases with globalCompositeOperation set to "multiply" instead of default, while keeping both canvases separated and overlapping.

Here's what I have :
https://www.dropbox.com/s/zw0h9yjxsk4z7ug/whatIHave.png

Here's what I want :
https://www.dropbox.com/s/r3nrb9lxx03xbjh/whatIWant.png

I am aware that globalCompositeOperation would allow me to do that if I merged the two canvases into one. But I'd rather keep both canvases : my background canvas is displayed by a lib. I can still draw in it, but that would complicate things a lot:

All in all it seems way better to keep away from interfering with the lib. Is there a way to choose how overlapping canvases will behave?

Thanks in advance!

EDIT: We've also thought of transforming the white parts of the background canvas into transparent parts and adding our highlight canvas underneath, but that's also complicated, if not impossible.

Solution

  • Do I understand that the letters canvas the lib draws has an opaque (white) background rather than a transparent one?

    If so, any options for applying highlighting will be relatively poor in performance.

    Standard canvas compositing won't help as there is no blending mode that combines source-destination pixels.

    What you're left with is .getImageData to get the letters pixels. Then apply blue pixels where they overlap white pixels but not where they overlap black(letter) pixels.

    However .getImageData is not GPU accelerated and is therefore relatively slow.

    Putting the blue highlighting canvas behind a non-opaque letters canvas would give you the best performance.

    Bottom line: If performance is critical and you want 24+ fps then hack that library to make the background transparent instead of opaque-white. (sorry!)