I want to show a MediaStream from the camera back to the user.

I'm using a Canvas and the drawImage method to render the stream.

I need to flip and blur the image.

I want to understand if it's more performant to apply the blur and scale effects to the canvas using CanvasRenderingContext2D.filter OR using CSS3 transform.rotate() and filter: blur() applied to the canvas element.

For context i'm inside a React app, but i don't think this is relevant.

To clarify my question is not "which one is better" (although suggestions are welcome) but it's: How would you measure the performances in order to make the best decision?

I can open chrome's console>performance monitor but it only gives me a live view of the CPU usage, i don't have a way to get the average through time and it's not consistent.