jsPsychSketchpad gives error when saving trial with background

[HenningTm]

Hi,

when using the jsPsychSketchpad function with a background image and saving a trial firefox gives this error:
"Uncaught DOMException: The operation is insecure."
This only happens when the "save_final_image" parameter is set to true, so somehow saving the png image seems to cause a problem.

EDIT: Using the Brave browser, I get a different error: "execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported."

The background I am using is in the same folder as the experiment and I am accessing it with a relative path.

How can I save the trial with a background enabled?

[Shaobin-Jiang]

I think this explains the problem. I met this problem before when experimenting with canvas and my solution was to, as the stackoverflow post has advised, set the loaded image's crossOrigin property to Anonymous. However, in the sketchpad plugin, the background image we provide is actually a url and the loaded image can be accessed only from within the plugin code (I had wanted to suggested manually adding the background image but it would involve drawing and redrawing many times; too much of a trouble).

So, my advice would be to download a copy of the sketchpad plugin code and make some modifications yourself. Locate this part of code:

add_background_image() {
    return new Promise((resolve, reject) => {
        if (this.params.background_image !== null) {
            this.background_image = new Image();
            this.background_image.src = this.params.background_image;
            this.background_image.onload = () => {
                this.ctx.drawImage(this.background_image, 0, 0);
                resolve(true);
            };
        }
        else {
            resolve(false);
        }
    });
}

Add after line 427, which is:

this.background_image.src = this.params.background_image;

Add this line of code:

this.background_image.crossOrigin = 'Anonymous';

You will also need to make changes to how you import the sketchpad plugin.

[HenningTm]

Thanks for the answer!

Using the suggested code additions leaves the background blank now. Do you know why this might be?

"You will also need to make changes to how you import the sketchpad plugin." Do you just mean I need to import the altered sketchpad script instead of the standard one or is there more to this step?

Best wishes

[Shaobin-Jiang]

The recommended way of importing the plugin would be using the cdn-hosted script. But now that you are using your own modified version of the plugin, you will need to change the src to the changed file.

As for the blank screen, it can mean a lot of things. You might want to check out in the console whether any error has been thrown.

[Shaobin-Jiang]

An additional note. It did not occur to me that you might be running the experiment via the file protocol. If such is the case, you might need to set up a local server as I seem to recollect loading local images otherwise would be deemed as loading from a foreign source, hence the cors error and the eventual blank screen. You could just use the http server with python or nodejs.

[HenningTm]

Thank you! I am running it through node js and thanks to your code changes it works now on my home computer. The blank screen only occurs on my work PC, without any console error messages. I assume some stricter security guidelines prohibits the loading. I'll mark it as accepted.

[HenningTm]

Thank you, these code changes work!