要旨

html2canvasは複数のtext-shadowを指定すると正常に読み込まないバグを抱えています。それを~~強引に~~解決できたのでやり方の解説とバグ回避用のJavaScriptを公開しています。コピペしてご利用ください。

目次

背景
解説
配布用JS（コピペ目的の人向け）
参考文献

背景

html2canvasはNiklas von Hertzenが開発しているjavascriptライブラリで主にスクリーンショット機能を目的に使用されています。
私はCSSで字幕を作成するアプリケーション(自作)の開発に用いたのですが、
text-shadowの値を最初の一つしか読み込まないバグ仕様にぶつかりました。
アプリケーションの仕様上、妥協するわけには行かなかったので、
text-shadowの値の数だけ要素を動的に生成して重ねることで強引に突破しました。

text-shadowの値をRGB->HEXして","でsplitして配列のlength分だけfor文で要素を生成して対象の要素のCSSを完コピさせた上で対象の要素の上にかぶせることでできたんだけど、この手法思いつくまでにクソほど時間かかった。ってかもっとスマートに書きてぇのにこれしかアルゴリズム思いつかんかった。
— LOVESANA (らぶさな) (@LovesanaCSS) July 7, 2019

3年経っても誰も書かなかったので就活アピールも兼ねて書いていきます。
初Qiitaカキコなのでお手柔らかにお願いします。（~~さっき登録しました~~）
ご指摘や改善点は歓迎です！

問題点の整理

環境

使用ライブラリ
- html2canvas 0.4.1
動作確認済ブラウザ
- Safari バージョン14.1.2 (14611.3.10.1.7)
- Google Chrome バージョン: 104.0.5112.79（Official Build）
実行環境
- MacBook Pro (13-inch, 2016, Two Thunderbolt 3 ports)
  - macOS Mojave 10.14.6（18G8022）