4

抽象化されたメソッドが実際にキャンバスに描画されることをテストできるように、キャンバス API をプロキシすることを望んでいますが、プロキシ後にエラーが発生するという問題が発生しています。

'strokeStyle' setter called on an object that does not implement interface CanvasRenderingContext2D

このコードは簡略化されていますが、同じエラーがスローされます。

/** !NB: This snippet will probably only run in Firefox */
var canvas = document.createElement("canvas");
canvas.width = 100;
canvas.height = 100;
canvas.style.backgroundColor = '#FF0000';

var ctx = canvas.getContext("2d");                          
var calls = [];

var handler = {
    get( target, property, receiver ) {

        if ( typeof ctx[property] === 'function' ){
            return function( ...args ){
                calls.push( { call: property, args: args } )
                return ctx[property]( ...args );
            };
        }

        return ctx[property];
    }
};

try {
    document.body.appendChild(canvas);
    var proxy = new Proxy( ctx, handler );
    
    proxy.scale( 1, 1 );
    proxy.strokeStyle = '#000000';
    
    canvas.getContext = function(){
        return proxy;  
    };
}
catch( e ) {
    document.getElementById('message').innerHTML = 'Error: ' + e.message;   
}
<div id="message"></div>

何かご意見は?

4

1 に答える 1