How do I access an HTML canvas element from inside a jsPsych function? #2299

sophief10 · 2021-11-02T20:21:23Z

sophief10
Nov 2, 2021

Hi everyone!

I am having trouble running the following code:

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <script src="jspsych-6.3.1\jspsych.js"></script>
        <script src="jspsych-6.3.1\plugins\jspsych-html-button-response.js"></script>
        <link href="jspsych-6.3.1\css\jspsych.css" rel="stylesheet" type="text/css"/>
    </head>
    <body>
        <canvas id="myCanvas" width="200" height="100"></canvas>
    <script>

        var finalTimeline = [];

        var example = {
            type: 'html-button-response',
            stimulus: function() {
                var c = document.getElementById("myCanvas");
                var ctx= c.getContext("2d");
                ctx.beginPath();
                ctx.arc(95, 50, 40, 0, 2 * Math.PI);
                ctx.stroke();
            }
        };
        finalTimeline.push(example);

        jsPsych.init({
            timeline: finalTimeline
        });

    </script>
    </body>
</html>

When I try to run that code in Visual Studio Code, my debug console says this: "Uncaught TypeError: Cannot read properties of null (reading 'getContext')."

I know that this has something to do with the fact that I am calling the canvas element from inside a jsPsych function, because the code works fun when run in regular JavaScript. Unfortunately, I'm not sure what my syntax error is.

If someone has an idea as to what my error(s) could be, would you please share your thoughts here?

Answered by jodeleeuw

Nov 2, 2021

Hi @woodenchair,

The problem here is that when jsPsych starts running the experiment it removes all of the content from the <body> element in order to display the experiment content.

One option would be to use the canvas-button-response plugin, which renders a canvas on the screen for you and you can draw on it using code similar to what you have right now.

Another option is to use the display_target parameter in jsPsych.init to render your experiment in a different element than the body. This would let the canvas element stay on the screen after jsPsych begins.

View full answer

jodeleeuw · 2021-11-02T21:29:00Z

jodeleeuw
Nov 2, 2021
Maintainer

Hi @woodenchair,

The problem here is that when jsPsych starts running the experiment it removes all of the content from the <body> element in order to display the experiment content.

One option would be to use the canvas-button-response plugin, which renders a canvas on the screen for you and you can draw on it using code similar to what you have right now.

Another option is to use the display_target parameter in jsPsych.init to render your experiment in a different element than the body. This would let the canvas element stay on the screen after jsPsych begins.

1 reply

sophief10 Nov 2, 2021
Author

@jodeleeuw That works! Thank you!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

How do I access an HTML canvas element from inside a jsPsych function? #2299

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment 1 reply

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

How do I access an HTML canvas element from inside a jsPsych function? #2299

Uh oh!

sophief10 Nov 2, 2021

Replies: 1 comment · 1 reply

Uh oh!

jodeleeuw Nov 2, 2021 Maintainer

Uh oh!

sophief10 Nov 2, 2021 Author

sophief10
Nov 2, 2021

Replies: 1 comment 1 reply

jodeleeuw
Nov 2, 2021
Maintainer

sophief10 Nov 2, 2021
Author