html5 - Defining how 2 separate, overlapping canvases blend -

i want put canvas on top of , define way contents blended.

i have 1 white canvas black characters on it, , want highlight part of transparent blue rectangle, without having black characters in background turning dark blue. in fact, i need aspect i'd if merged 2 canvases globalcompositeoperation set "multiply" instead of default, while keeping both canvases separated , overlapping.

here's have :

here's want :

i aware globalcompositeoperation allow me if merged 2 canvases one. i'd rather keep both canvases : background canvas displayed lib. can still draw in it, complicate things lot:

• i'd dependent on logic , have tweak mine , theirs make work,
• performance critical , solution imply more drawing @ 24fps,
• i'd struggle every time lib updated...

all in seems way better keep away interfering lib. there way choose how overlapping canvases behave?

thanks in advance!

edit: we've thought of transforming white parts of background canvas transparent parts , adding our highlight canvas underneath, that's complicated, if not impossible.

do understand letters canvas lib draws has opaque (white) background rather transparent one?

if so, options applying highlighting relatively poor in performance.

standard canvas compositing won't there no blending mode combines source-destination pixels.

what you're left .getimagedata letters pixels. apply blue pixels overlap white pixels not overlap black(letter) pixels.

however .getimagedata not gpu accelerated , therefore relatively slow.

putting blue highlighting canvas behind non-opaque letters canvas give best performance.

bottom line: if performance critical , want 24+ fps hack library make background transparent instead of opaque-white. (sorry!)