HTML canvas元素无法被识别？jsPsych调用时getContext报错如何解决

问题根因 #

你遇到的报错是jsPsych的默认渲染逻辑导致的：调用jsPsych.init()时，默认会清空整个<body>标签下的所有原有DOM元素，你预先写在body里的<canvas id="myCanvas">在jsPsych开始运行 timeline 前就被删除了，所以stimulus回调执行时获取到的c是null，才触发了getContext相关报错。普通JS逻辑正常就是因为没有触发jsPsych的全局DOM清空操作。

解决方案 #

方案1：在stimulus回调中动态创建canvas（更符合jsPsych的设计规范） #

不需要预先在body里写canvas标签，直接在回调中生成后交给jsPsych渲染，示例修改后的代码如下：

<!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>
    <script>
        var finalTimeline = [];
        var example = {
            type: 'html-button-response',
            stimulus: function() {
                // 动态创建canvas元素
                var c = document.createElement("canvas");
                c.width = 200;
                c.height = 100;
                var ctx= c.getContext("2d");
                ctx.beginPath();
                ctx.arc(95, 50, 40, 0, 2 * Math.PI);
                ctx.stroke();
                // 返回canvas元素给jsPsych渲染到页面
                return c;
            }
        };
        finalTimeline.push(example);
        jsPsych.init({
            timeline: finalTimeline
        });
    </script>
    </body>
</html>

方案2：指定jsPsych的渲染容器，保留原有body内容 #

如果你需要保留预先写在页面里的canvas，可以在jsPsych.init中添加display_element参数，指定jsPsych只在某个固定容器内渲染内容，不会清空整个body：

1. 先在body里新增一个专属的jsPsych渲染容器，保留原来的canvas：

<body>
    <canvas id="myCanvas" width="200" height="100"></canvas>
    <!-- 新增jsPsych专属渲染容器 -->
    <div id="jspsych-target"></div>
    <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,
            // 指定渲染容器
            display_element: 'jspsych-target'
        });
    </script>
</body>

内容的提问来源于stack exchange，提问作者Guzzly Puzzly