相変わらずのググり力でclipToにたどり着けなかったのでめも.
直近HauVisualizerの作成などで必要になってこまっていた.
freeDrawingモードで絵にスプレーをかけたあとで保存時にclipしてやるために実装.
canvas.clipToに対してどのような切り抜きをするかを関数で渡してやる.
今回は下記のnumbersにようにclip-pathで設定されたような値から%を消した値を抜き出して、それに応じたマスク画像を作成した.
moveToでどれでもよいので開始点に移動して、そこから隣接する辺を追っていく.lineToで結ぶ.一周したら終了.
これをやってからrenderAllしてtoDataURLで保存すれば、fabricJSのcanvasのうちclipToのマスクされた部分だけ残り、他は消えて保存される.
消えた部分はtransparentになる.