Canvas rendering performance issue

I have a set of images I, that I want to perform some processing on (tinting), before drawing onto the main canvas. For my use case, the image needs a different tint that needs to be calculated every frame.

To achieve the desired result, I draw the image I onto a secondary hidden canvas B, with a globalCompositeOperation to apply the desired effect. Thus far, there are no noticable performance issues. It's only when I draw B to the main canvas that I start to see a significant framerate drop. Looking at chrome's performance debugger seems to suggest most of the time is taken by the GPU, and not scripting.

What am I doing wrong? Is there a way to work around this performance issue?

I have tried separately drawing on canvas B, and in a different test drawing B to the main canvas. Neither seem to bring any noticable performance issue. Only the combination of both drawing to B and drawing B to the main canvas gives this performance issue.

Context: I am using an apple silicon M1 chip, running on the latest version of chrome

TL;DR Reproduceable example

https://jsfiddle.net/t920zro8/1/

draw2() is more than 10x slower than draw1(), despite only having 2x the number of operations. (In my own project, the difference is far more than 10x but this example seems to reflect the same idea)

It seems tinting using globalCompositeOperation is not the main culprit, but the act of drawing the second canvas onto the main is.

from Canvas rendering performance issue