javascript - Paint Worklet でライブラリをインポート/使用するには?

Question

Paint Worklet 内でキャンバス ライブラリを使用できるかどうかを確認しようとしています。paper.js を使用できるかどうかをテストしようとしました。問題は、ワークレットにライブラリをロードできないこと、ライブラリへのアクセスを許可しないグローバル スクリプト、および web waker からの importScripts が機能しないことです。

ペイント Worklet 内でライブラリを使用することはできますか?

PaintAPI で paper.js を使用するために必要な唯一のことは、の代わりにペイント ワークレット コンテキストを返す CanvasProvider オブジェクトをモックすることですcanvas.getContext('2D');。問題は、ワーカーのように self を使用でき、紙のオブジェクトにアクセスできないことです。

次のようなコードがあります。

CSS.paintWorklet.addModule(blobify(function() {
    //importScripts('https://cdn.statically.io/gh/paperjs/paper.js/prebuilt/module/dist/paper-full.js');

    class Circle {

        static get inputProperties() {
            return ['--pointer-x', '--pointer-y', '--pointer-options'];
        }

        paint(context, geom, properties) {
            /*
            self.CanvasProvider = {
                getContext: function() {
                    return context;
                }
            };
            console.log(paper);
            */
            var x = properties.get('--pointer-x').value || 0;
            var y = properties.get('--pointer-y').value || 0;
            const prop = properties.get('--pointer-options');
            const {
                background,
                color,
                width
            } = Object.assign({
                color: 'white',
                background: 'black',
                width: 10
            }, JSON.parse(prop.toString()));
            context.fillStyle = color;
            //console.log({x,y, color, background, width})
            context.beginPath();
            context.arc(x, y, Math.floor(width / 2), 0, 2 * Math.PI, false);
            context.closePath();
            context.fill();
        }
    }
    registerPaint('circle', Circle);
}));

動作しないコードはコメントアウトされています。これをCodePenで試してみることができます。