一応やってみたが
$('<img>')で作ったものにfilterかけたあとdrawImageしてみたけどスルーされてしまった
cssでの効果をそのまま引き継いで保存とかできたらいいのにな
まあキャプチャーするような拡張使えば保存もできるけど

見た目だけならCSS一択だわ
例えば>>57みたいなのも戦闘遷移にfilterでいろいろしつつ
並列で戦闘エフェクトかけられるし

あと一応反転の比較
上はcanvas+スクリプト、下はCSSのfilterでそれぞれ反転
https://jsfiddle.net/xudrpwm7/