html2canvasでtext-shadowに複数の値を対応させる方法

Question

前提・実現したいこと

html2canvasは文字列を画像化する際に、
text-shadowの値を先頭の1つしか読み込まない仕様なので、
それを回避したい。（すべて読みこんでほしい）

該当のソースコード

CODEPEN のURLを載せておきます。
https://codepen.io/lovesana0881/pen/MMQgyQ

下記はCODEPENの写しです。

<p>shadow</p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>

p {
  text-shadow:
    100px 50px 0 red,/*最初の一つは読み込む*/
    100px -50px 0 blue,/*以後、無視*/
    -100px 50px 0 orange,
    -100px -50px 0 green;  
}

/* 以下、整形用 */
p {
  width: 350px;
  height: 160px;
  line-height: 160px;
  text-align: center;
  font-size: 50px;
  float: left;
}

canvas {
  margin-top: 40px;
}

const p = document.querySelector('p');
html2canvas( p,{
  onrendered: function(canvas){
    document.body.appendChild(canvas);
  }
} );

補足情報（FW/ツールのバージョンなど）

以下のブラウザで動作を確認。
Safari バージョン12.1.1 (14607.2.6.1.1)
Chrome バージョン: 75.0.3770.100

Answer 1

読み込めない仕様なのであれば、それはもうどうしようもないと思います。
どうにかしたいのであればhtml2canvasをフォークして自分で改造するしかないような・・・

ちなみに以下のURLでは、text-shadowの分だけElementを作って、各Elementに一つずつtext-shadowをつけて、position absoluteで同じ場所に重ねちゃえば、見た目はおなじになるよって書いてありました。

それぐらいしか対処法はないのではないかと思います。

https://stackoverflow.com/questions/37231814/using-html2canvas-with-multiple-text-shadows

Comments

[lovesana]

html2canvasをイジれるほどの技術は持っていないので、
text-shadowの数だけ要素を生成しようと思います。
ご回答、ありがとうございました。